JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<div class="box"> <div class="rora"></div> <<brush>><span>Rora</span><</brush>> <div class="forward" id="text" style="position:absolute; top: calc(7vh + 5px); bottom: calc(6vh + 5px); left: 0; width:100%; line-height:1.2em; padding-left:5vw; padding-right:5vw; box-sizing:border-box; overflow:auto; width:100%;"> <span> <<type 30ms>> _contents <</type>> </span> <<link "">> <<replace "#text">> <span> _contents </span> <<link "">> <<set $count++>> <<goto play>> <</link>> <</replace>> <<replace "#wait">> ➤ <<link "">> <<set $count++>> <<goto "play">> <</link>> <</replace>> <</link>> </div> <img src="images/spot1.png" style="height:auto; width:10%; position:absolute; top:-15%; left:10%; -webkit-filter: drop-shadow(2px 2px black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black); filter: drop-shadow(2px 2px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) "> <div style="color:white; position:absolute; top:-2%; height:20%; left: 10%; width:10%; line-height:1em; font-size:150%; text-align:center; transform: rotate(-10deg); "> <span>Menu</span> <<link "">> <<script>>UI.restart()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <img src="images/spot2.png" style="height:auto; width:10%; position:absolute; top:-15%; left:25%; -webkit-filter: drop-shadow(2px 2px black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black); filter: drop-shadow(2px 2px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) "> <div style="color:white; position:absolute; top:-2%; height:20%; left: 25%; width:10%; line-height:1em; font-size:150%; text-align:center; transform: rotate(5deg);"> <span>Save</span> <<link "">> <<script>>UI.saves()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <img src="images/spot1.png" style="height:auto; width:10%; position:absolute; top:-15%; right:10%; -webkit-filter: drop-shadow(2px 2px black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black); filter: drop-shadow(2px 2px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) "> <div style="color:white; position:absolute; top:-2%; height:20%; right: 10%; width:10%; line-height:1em; font-size:150%; text-align:center; transform: rotate(10deg);"> <<auto>> </div> <img src="images/spot2.png" style="height:auto; width:10%; position:absolute; top:-15%; right:25%; -webkit-filter: drop-shadow(2px 2px black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black); filter: drop-shadow(2px 2px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) "> <div style="color:white; position:absolute; top:-2%; height:20%; right: 25%; width:10%; line-height:1em; font-size:150%; text-align:center; transform: rotate(-5deg);"> <span>Skip</span> <<skip>> </div> <img src="images/spot3.png" style="height:auto; width:6%; position:absolute; bottom:-8%; right:50%; transform: translateX(50%) rotate(180deg); -webkit-filter: drop-shadow(2px 2px black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black); filter: drop-shadow(2px 2px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) "> <div style="position:absolute; bottom:7%; height:3%; left: 50%; transform:translateX(-50%); width:auto; line-height:1em; font-size:100%;"> <span id="wait">⧖</span> </div>
<<widget "brush" container>> <div class="brush-wrap"> _contents </div> <!-- create svg inline with clipPath and animation --> <!-- do not hide SVG with display: none; it will disable anim/clipping --> <svg height="0" width="0" > <defs> <!-- square that can be animated animating view area user for clipping shape --> <!-- runs only once --> <clipPath id="rect-cp"> <rect id="rect" x="0" y="0" width="0" height="1"> <animate id="anim" attributeName="width" dur="1ms" fill="freeze" calcMode="spline" keyTimes="0; 1" keySplines="0.5,0,0.5,1" values="0;1" /> </rect> </clipPath> <!-- clip path for shape; clip path should use clipPathUnits="objectBoundingBox" to stretch to full size in this case path should contain points from 0 to 1 (1px size) --> <clipPath id="clip" clipPathUnits="objectBoundingBox"> <use href="#brush-shape" clip-path="url(#rect-cp)" /> </clipPath> <!-- brush shape --> <path id="brush-shape" d="M.261.995A.07.07 0 0 0 .257.978V.975C.258.97.255.972.257.967.259.963.255.96.257.959V.95C.256.943.259.948.257.943.256.934.255.956.255.944.255.937.254.943.253.94.252.939.253.938.254.937.257.934.257.931.26.926.267.907.277.916.284.899.293.885.287.897.29.879.295.874.308.872.312.862.288.866.246.848.22.864.207.871.2.872.188.891.175.892.176.901.161.91.156.928.143.92.138.928c0-.005-.025-.012-.022.01-.007.013.01-.01.011-.003-.001.004.006 0 .004.003L.13.942C.13.947.113.951.111.945.103.948.059.92.089.918.069.889.048.9.029.904.028.901.002.922.008.898.012.884.032.892.029.873.026.872.031.869.029.867c0-.004.002-.012.005-.014A.055.055 0 0 0 .017.85C.021.826.042.831.045.818.044.818.038.815.041.811.042.804.053.795.046.793.041.79.032.788.029.791.026.792.019.799.024.783V.782C.024.784.022.778.022.781.021.786.019.782.022.778.024.774.023.773.02.77.011.75.041.756.045.75.037.732.04.727.048.717.051.714.045.713.046.704.04.698.026.726.019.716L.02.713C.02.711.049.696.036.696.031.688.013.697.011.7.009.699.012.689.015.686c.004-.01-.008 0-.009 0A.083.083 0 0 0 .01.671C-.015.656.013.64.022.638.065.619.022.624.05.602.076.574.047.581.061.565.065.559.049.563.054.556.056.549.035.568.036.554.034.55.047.529.046.527.045.52.061.504.058.495c0-.008.021-.016.024-.022C.09.469.095.459.101.455.102.454.101.453.1.453.093.454.093.447.09.446.087.446.094.439.095.443c.003.002.008 0 .012.005.004.008.001-.003 0-.006C.1.427.133.438.124.42c0-.006.005-.003.002-.009C.12.412.106.413.104.406.104.395.105.393.098.392.088.392.105.381.108.38.117.373.133.38.141.371.143.369.143.369.143.362V.348C.142.342.143.341.151.342.164.342.166.334.179.329.161.323.132.331.118.344v.002c-.001 0 0 .006-.002.001C.113.338.115.354.112.347.107.338.107.36.1.34.098.344.1.32.101.324L.102.32C.106.32.109.307.111.316H.11L.108.32v.002c0 .006.004.01.002.005C.109.324.115.328.115.325.116.32.117.33.118.324.118.317.119.319.12.315.121.311.125.309.125.304c0-.011.001.007.002-.001.002-.008 0 .008.002.001S.122.289.131.283C.133.283.135.281.135.277.136.271.143.276.144.27.14.26.126.277.123.262.121.254.124.257.122.252S.124.252.124.25C.121.245.128.243.128.247c0 .002 0 .002 0 0A.017.017 0 0 0 .135.244C.137.244.138.239.136.239.129.233.144.217.147.217.155.202.113.217.11.212.107.209.11.217.108.216.104.212.101.22.106.206c0 0-.004.003-.002 0C.106.198.112.215.113.205.112.202.121.202.12.205.122.199.131.198.134.195.139.19.14.192.144.188.151.183.13.188.131.187.123.185.055.231.084.194.128.159.184.15.23.132.26.119.281.094.313.079.321.079.338.05.341.074c0 .004.001.001.002.002C.345.074.342.09.344.084.339.11.33.106.375.088.4.081.424.072.449.069.461.086.479.065.497.067c.07-.01.145.008.213.021a.525.525 0 0 1 .129.034C.844.128.854.123.855.13c0 .003.001.004.001.001 0-.004.002.001.003 0C.861.13.861.145.859.136.832.14.793.123.76.123c.021.019.057.01.076.03C.833.158.826.15.821.149.814.149.802.15.793.142.789.15.775.143.77.146.772.151.768.154.762.151.727.147.687.119.652.139c.037.02.079.016.115.035.043.029.096.022.135.042C.887.223.852.214.835.215.826.213.824.214.829.217c.004.001.004.005 0 .008-.005.007.02.007.025.009.009.001.01.002.01.005-.003.007.027.007.029.012C.905.263.867.262.889.269c.024.003.053.029.075.04 0 .004-.005.002-.006.004 0 .003.006.005.003.01-.002.003.001.007.006.01S.975.34.973.34c-.001.002.01.009.013.013C.996.36.983.358.981.365.977.371.964.355.965.375c.002.002.021.013.01.014-.006 0-.004.003-.01.003-.014.004.012.011.014.015C.986.411.954.416.975.425c.006.006.009.001.013.007C.989.437.984.446.985.44.987.435.984.437.984.44S.983.443.977.442C.97.441.968.442.97.448c.002.018.019.014.022.027C.988.486.961.462.958.476.962.503 1 .488.997.509.997.516.99.514.992.527.994.536.99.539.995.541.998.56.982.538.982.547c-.004.017.002.022 0 .024v.002c.003.004-.011 0-.01.009C.972.584.971.585.97.585.96.586.978.604.98.608c.008-.002.015.013.005.02C.985.637.937.619.957.635.98.649.955.642.973.668.974.674.974.68.972.679.97.696.966.692.96.693.952.691.953.703.945.698.942.699.935.701.94.71c.002.006.022.018.015.026C.955.743.952.751.951.75.95.755.936.753.94.764c.003.01.007.005.005.022.001.009-.001 0-.002.002L.939.796C.948.8.939.808.935.813.931.818.934.825.926.816.922.812.921.812.919.819S.903.814.904.82c0 .003.013.008.01.011C.91.837.926.846.93.849.929.859.927.861.93.87.926.877.906.852.903.859c-.004.009.01.012.012.023C.916.887.906.881.906.884.91.894.899.882.898.881S.888.87.887.877c-.004.014.02.018.027.028C.93.914.907.914.905.915c0 .001.008.008.004.011C.908.931.9.921.901.926.914.945.868.935.866.939.807.926.75.894.69.896.674.894.679.901.673.897.668.896.661.885.657.89.656.892.653.89.653.887.62.879.637.881.59.88.563.878.561.88.536.882.532.882.527.891.529.895.526.915.52.903.513.904.485.903.45.918.424.927.418.921.398.928.392.932c.001.009.005.002.005.011 0 .004-.001.004-.002 0C.394.937.394.945.393.943.373.954.352.952.329.962.303.968.298.993.278.992.273.994.265.996.261 1V.995zm0-.019c-.002-.009-.003.019 0 0zM.354.945C.356.942.356.942.352.943L.337.948c0 .003.014 0 .017-.003zM.097.92C.097.919.095.919.095.921.096.924.097.921.097.92zm.04-.007c0-.003-.003-.002-.003 0 0 .004.003.002.003 0zM.111.903C.111.901.11.901.109.902.106.907.111.907.111.903zM.423.902C.429.893.404.901.396.903.394.904.42.908.423.902zm.02-.006c0-.002-.012 0-.006.003C.439.9.441.898.443.896zM.09.897c.003 0-.004-.007-.003 0 .001.004.002-.001.003 0zM.451.894c-.006-.006-.007.008 0 0zM.883.87C.884.867.876.868.88.87c.002.002.002.002.003 0zM.032.84C.031.839.03.841.032.841V.84zM.038.837C.041.834.037.836.036.837c-.001.002 0 .002.002 0zm.007.001C.05.822.038.834.042.835c.002 0 .001.007.003.003zM.943.802C.943.8.94.799.942.802c.001.002.001.002.001 0zM.059.718C.058.717.057.719.059.719V.718zM.055.712c0-.008-.009.005-.002.004L.055.712zm.01.001C.064.71.062.709.062.712c0 .004.003.004.003.001zM.061.711C.063.708.057.709.058.711c-.001.003.002.003.003 0zM.981.47C.981.467.98.467.98.47c0 .002.001.002.001 0zM.985.431H.984c-.001.002.002.002.001 0zM.977.406H.975c-.002.002.004.002.002 0zM.952.39C.951.388.941.38.94.382c.001.002.012.01.012.008zM.146.371C.148.368.144.369.144.371c-.001.002.001.002.002 0zM.948.359C.948.357.931.349.935.355c0 .001.013.007.013.004zM.115.334c0-.003-.001-.002-.001 0s.001.002.001 0zM.189.33C.188.329.187.331.189.331V.33zM.103.327.102.325C.1.324.104.332.103.327zM.105.324v.002-.002zM.137.31C.141.307.165.296.154.283.154.278.179.276.163.27.16.27.147.281.153.284.154.287.147.287.145.294c0 .002 0 .002-.001 0 0-.002-.001-.002 0 0C.144.299.138.3.137.298c0-.001-.001-.002-.001 0C.136.303.13.305.129.31c.001.005.007 0 .008 0zM.16.235C.159.233.157.239.159.237L.16.235zM.827.227c0-.002-.003-.003-.003 0 0 .002.003.002.003 0zM.161.214h.001C.159.205.155.219.161.214zm.661 0C.822.212.82.212.82.214c.001.002.002.002.002 0zm.003.001C.824.214.823.216.825.216V.215zM.171.21C.17.209.169.211.171.211V.21zM.109.208c0-.003-.001-.003-.001 0 0 .002.001.002.001 0zM.123.202.122.205.123.202zm.006.001c0-.008-.001.002-.001.003L.129.203zM.852.132C.851.131.85.133.852.133V.132zM.343.09C.343.087.342.085.342.089c0 .003.001.004.001.001zM.081.976c0-.007-.003-.01.002-.011C.087.964.081.97.083.973.085.973.086.97.086.967.085.965.091.977.092.969c.001-.006.003.013.002.01C.093.978.094.971.093.976.092.98.081.979.081.976zM.073.971V.965c.002.001.002.01 0 .006zM.085.955C.084.948.087.951.088.95.092.949.086.966.085.955zM.42.939.421.937C.422.936.42.943.42.939zM.426.938C.427.935.428.937.426.939V.938zM.13.932c.003-.018.003.009 0 0zM.753.913c0-.003.002-.002.002 0 .001.003-.002.003-.002 0zM.744.911c0-.002.001-.003.002 0 0 .002-.002.002-.002 0zM.196.908C.195.899.2.907.2.909.197.911.196.91.196.908zM.674.903c0-.005.002.002.001.002L.674.903zM.666.901c-.001-.005.001-.006 0 0 0 .002 0 .002 0 0zm.002.001V.899C.67.9.67.905.668.902zM.933.891V.886v.005zM.247.879c0-.002.002-.003.002 0-.001.002-.001.002-.002 0zM.252.875c0-.004.007-.006.006-.003v.002C.261.876.251.88.252.875zM.027.87.028.867C.029.87.027.875.027.87zM.032.816.033.813c0-.001-.001.01-.001.003zM.036.815V.813v.002zM.998.546C.997.541 1.001.547 1 .548L.998.546zM.091.393c0-.002.002-.002.002 0 0 .003-.002.002-.002 0zm.023-.03L.113.359C.117.355.136.351.124.36.121.362.117.369.114.363zm-.007 0h.001c.001.002-.001.002-.001 0zM.097.335V.332v.003zM.112.317C.112.309.108.31.113.302.119.292.119.3.117.305v.002C.123.31.117.312.115.311v.004C.114.315.113.323.112.317zM.119.301C.118.297.122.292.12.3c0 .001 0 .002-.001.001zM.1.214c0-.003.001-.002.002 0C.102.217.1.216.1.214zM.112.205C.113.201.113.201.113.204.113.205.11.21.112.205zm.78-.034C.893.169.896.167.897.168c0 .006-.006.003-.005.003zM.889.169c0-.007.005.006 0 0zM.875.166A.211.211 0 0 0 .837.157L.841.15l.001.004C.844.156.845.145.844.152c0 .002 0 .002 0 0C.849.147.855.155.86.155c.005 0 .014.001.019.006 0 .006-.002.008-.004.005zM.852.156C.852.153.85.154.85.156c-.001.002.002.002.002 0zM.882.15C.88.149.881.141.882.148V.15zM.87.142C.869.136.86.144.861.134.863.127.867.141.869.135.87.133.872.133.873.135.874.144.871.15.87.142zm.006.001c.003-.01.002.009 0 0zM.23.128h.001C.232.129.229.13.23.128zM.341.069c0-.005.002.002.001.002L.341.069zM.354.07C.352.062.357.067.356.056.357.049.364.052.363.042.364.035.365.046.366.043.367.035.37.044.37.041V.039C.372.038.372.047.374.047V.04C.379.034.474-.004.45.035c-.009.004.01.003.007.01 0 .001-.008.003-.008.001C.439.043.424.048.415.042a.039.039 0 0 1-.016.007C.398.045.396.049.395.05.395.047.39.048.389.052.388.058.378.062.378.055.377.057.378.064.376.059.375.057.375.057.375.059.375.063.37.06.37.063.369.07.366.059.366.058c0 .003-.001.009-.002.005C.362.062.355.074.354.07zM.346.06c0-.007.002 0 .001.002L.346.06zM.348.057.349.056C.351.057.347.06.348.057zM.539.051c-.004-.002 0-.006.001 0 0 .004 0 .001-.001 0zM.527.047c.002-.002.002-.002.001 0 0 .001-.003.003-.001 0zm.003 0c0-.003.003.003.001.002L.53.047zM.459.042C.457.035.479.039.478.04c.003-.001.003.002 0 .003C.475.045.477.036.475.044.472.051.471.042.469.045.468.047.467.046.468.042.467.04.46.049.459.042zm.045.003c0-.005.002.002.001.002L.504.045zM.482.041c-.002-.004 0-.003 0 0 .001.002.001.002 0 0zM.697.04C.694.034.683.044.68.033L.683.027c.001-.001 0 .01.002.004.002-.007.003.008.003.001 0-.01.003.002.003.001.002-.007.002.003.006 0C.7.034.703.034.703.039.704.042.697.043.697.04zm.009 0c0-.005.008-.003.003.001C.708.043.706.042.706.04zM.667.033C.666.028.662.034.662.033.659.03.651.032.644.028.64.022.632.036.629.028.601.037.582.02.551.023.539.021.485.026.498.008.535-.012.61.011.65.019.655.021.667.017.665.03.666.029.669.028.669.024v.001c0 .005.007-.001.008.002 0 .002.005.002.003.003C.678.03.678.031.679.032.682.035.668.037.667.033zM.506.015C.505.009.504.018.506.018V.015zM.474.022V.019c-.002.003 0-.006 0-.008.001.012.004.011.002 0C.475.005.482.012.482.008c0-.003.004-.004.004 0 0 .002 0 .002.001 0 .002-.004 0 .005 0 .006.001.009.002-.017.004-.008l.001.012C.494.019.492.022.49.022.483.026.483.005.481.014c0 .003.001-.002.001.003C.482.021.48.016.48.02.481.023.472.028.474.022zM.489.014V.012c-.002 0 0 .006 0 .002zM.466.022C.467.016.468.021.468.011.47.012.467.029.466.022zM.47.016c0-.007.002.002 0 .003V.016zM.472.011C.473.007.477.007.476.013.474.008.47.018.472.011zM.465.01h.001C.467.012.464.012.465.01zm.029 0C.492.007.495.008.495.01s0 .002-.001 0zM.491.006C.49 0 .494.011.492.01L.491.006z"/> </defs> </svg> <</widget>>
<div class="box" style="overflow:visible;"> <div style="opacity:0.7; position:fixed; bottom:3vh; top: 66vh; left:5vw; right:5vw; -webkit-filter: drop-shadow(3px 3px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white); ; filter: drop-shadow(3px 3px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white); box-sizing:border-box;"> <div class="ingot"> </div> <div style="width: calc(100% + 15px); background: rgb(52,35,47); position:absolute; left: -7px; top:5px; height:3vh; border-radius: 5px; -webkit-filter:drop-shadow(0px 2px 0 black); filter: drop-shadow(0px 2px 0 rgb(42,25,37)); border:1px solid black;"></div> <div style="opacity: 0.5; width: calc(100% + 15px); background-image: url('images/large-leather.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -7px; top:5px; height:3vh; border-radius: 5px; -webkit-filter:drop-shadow(0px 2px 0 black); filter: drop-shadow(0px 2px 0 rgb(42,25,37)); border:1px solid black;"></div> <div style="width: calc(100% + 15px); background: rgb(52,35,47); position:absolute; left: -7px; bottom:5px; height:3vh; border-radius: 5px; -webkit-filter:drop-shadow(0px 5px 0 black); filter: drop-shadow(0px 2px 0 rgb(42,25,37)); border:1px solid black;"></div> <div style="opacity: 0.5; width: calc(100% + 15px); background-image: url('images/large-leather.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -7px; bottom:5px; height:3vh; border-radius: 5px; -webkit-filter:drop-shadow(0px 5px 0 black); filter: drop-shadow(0px 2px 0 rgb(42,25,37)); border:1px solid black;"></div> <div style="position: absolute; height:5vh; left:50%; transform:translateX(-50%); top:-0.5vh; border: 3px solid black; line-height:1em; padding: 5vw; padding-top:5px; padding-bottom:0px; border-radius:2.5vh; background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);"> Ingot </div> </div> <div style="width: calc(100% + 15px); background: rgb(52,35,47); position:absolute; left: -7px; top:5px; height:3vh; border-radius: 5px; -webkit-filter:drop-shadow(0px 2px 0 black); filter: drop-shadow(0px 2px 0 rgb(42,25,37)); border:1px solid black;"></div> <div style="opacity: 0.5; width: calc(100% + 15px); background-image: url('images/large-leather.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -7px; top:5px; height:3vh; border-radius: 5px; -webkit-filter:drop-shadow(0px 2px 0 black); filter: drop-shadow(0px 2px 0 rgb(42,25,37)); border:1px solid black;"></div> <div style="width: calc(100% + 15px); background: rgb(52,35,47); position:absolute; left: -7px; bottom:5px; height:3vh; border-radius: 5px; -webkit-filter:drop-shadow(0px 5px 0 black); filter: drop-shadow(0px 2px 0 rgb(42,25,37)); border:1px solid black;"></div> <div style="opacity: 0.5; width: calc(100% + 15px); background-image: url('images/large-leather.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -7px; bottom:5px; height:3vh; border-radius: 5px; -webkit-filter:drop-shadow(0px 5px 0 black); filter: drop-shadow(0px 2px 0 rgb(42,25,37)); border:1px solid black;"></div> <div style="position: absolute; height:5vh; left:50%; transform:translateX(-50%); top:-0.5vh; border: 3px solid black; line-height:1em; padding: 5vw; padding-top:5px; padding-bottom:0px; border-radius:2.5vh; background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); overflow:hidden;"> Ingot <div style="width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,0.5)"></div> </div> <div style="color: #FEDB37;position: absolute; height:5vh; left:50%; transform:translateX(-50%); top:-1vh; border: 3px solid black; line-height:1em; padding: 5vw; padding-top:5px; padding-bottom:0px; border-radius:2.5vh; background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);"> <div style="width:5px; height:5px; border-radius:50%; position:absolute; top:50%; transform:translateY(-50%); left:5px; border:2px solid black; opacity:0.3;"></div> <div style="width:5px; height:5px; border-radius:50%; position:absolute; top:50%; transform:translateY(-50%); right:5px; border:2px solid black; opacity:0.3;"></div> @@opacity:0.7;Ingot@@ </div> <div style="color: #FEDB37;position: absolute; height:4vh; left:50%; transform:translateX(-50%); bottom:-0.5vh; border: 3px solid black; border-bottom: 5px solid black; line-height:1em; padding: 2vw; padding-top:1px; padding-bottom:0px; border-radius:2.5vh; background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);"> <div style="width:5px; height:5px; border-radius:50%; position:absolute; top:50%; transform:translateY(-50%); left:5px; border:2px solid black; opacity:0.3;"></div> <div style="width:5px; height:5px; border-radius:50%; position:absolute; top:50%; transform:translateY(-50%); right:5px; border:2px solid black; opacity:0.3;"></div> <span id="wait" style="opacity:0.7;">⧖</span> </div> <div style="color: rgb(222,151,169); position:absolute; top:1.25vh; height:3vh; left: 5%; width:10%; line-height:1em; font-size:2.5vh; text-align:center;"> <span>Menu</span> <<link "">> <<script>>UI.restart()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <div style="color: rgb(222,151,169); position:absolute; top:1.25vh; height:3vh; left: 25%; width:10%; line-height:1em; font-size:2.5vh; text-align:center;"> <span>Save</span> <<link "">> <<script>>UI.saves()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <div style="color: rgb(222,151,169); position:absolute; top:1.25vh; height:3vh; right: 5%; width:10%; line-height:1em; font-size:2.5vh; text-align:center;"> <<auto>> </div> <div style="color: rgb(222,151,169); position:absolute; top:1.25vh; height:3vh; right: 25%; width:10%; line-height:1em; font-size:2.5vh; text-align:center;"> <span>Skip</span> <<skip>> </div> <div class="forward" id="text" style="position:absolute; top: calc(7vh + 5px); bottom: calc(6vh + 5px); left: 0; line-height:1.2em; padding-left:5vw; padding-right:5vw; box-sizing:border-box; overflow:auto; width:100%;"> <span> <<type 30ms>> _contents <</type>> </span> <<link "">> <<replace "#text">> <span> _contents </span> <<link "">> <<set $count++>> <<goto play>> <</link>> <</replace>> <<replace "#wait">> ➤ <<link "">> <<set $count++>> <<goto "play">> <</link>> <</replace>> <</link>> </div> </div>
<div class="box" style="overflow:visible;"> <div style="font-size:75%; background:white ;position: absolute; height:3vh; left:50%; transform:translateX(-50%); bottom:calc(-2vh - 3px); border: 3px solid white; border-bottom:5px solid white; line-height:1em; padding: 0.5em; padding-left:1em; padding-right:1em; text-align:center; border-radius:50%; overflow:hidden;"> @@opacity:0.7;➤@@ </div> <div style="background:white; position: absolute; height:5vh; left:50%; transform:translateX(-50%); top:calc(-4vh - 3px); border: 3px solid white; border-bottom:5px solid black; border-radius:50%; line-height:1em; padding: 2vw; padding-top:2.5vh; padding-bottom:2vh; border-radius:50%;"> Opaline </div> <div style="opacity:0.7; position:absolute; height:100%; top:0; left:50%; transform:translateX(-50%); width:100vw; overflow:hidden;"> <div style=" opacity:0.5; position:absolute; height:100%; top:0; left:-5vw; width:50vw; background-image: url(images/butterfly.png); background-repeat:repeat; background-position-x: center; background-attachment: fixed; background-size: contain; -webkit-transform: scaleX(-1); transform: scaleX(-1); } "></div> <div style=" opacity:0.5; position:absolute; height:100%; top:0; right:-5vw; width:50vw; background-image: url(images/butterfly.png); background-repeat:repeat; background-position-x: center; background-attachment: fixed; background-size: contain; } "></div> <div style=" position:absolute; height:100%; top:0; left:50%; transform:translateX(-50%); width:100vw; background-image: linear-gradient(to right, rgba(255,255,255,0) ,rgba(255,255,255,1) 30% , rgba(255,255,255,1) 70%, rgba(255,255,255,0)); box-sizing:border-box; "> <div style=" position:absolute; height:100%; top:0; left:50%; transform:translateX(-50%); width:100vw; background-image: url(images/diagmonds.png); background-repeat:repeat;"></div> </div> </div> <div style="width: 100%; left:50%; transform:translateX(-50%); position:absolute; top:0vh; height: calc(5vh + 1px); background-image: linear-gradient(to right, rgba(255,239,127,0) ,rgba(255,239,127,1) 30% , rgba(255,239,127,1) 70%, rgba(255,239,127,0));"></div> <div style="opacity:0.6; width: 100%; left:50%; transform:translateX(-50%); position:absolute; top:0vh; height: calc(5vh + 1px); background-image: url('images/diagmonds.png');background-repeat:repeat; background-size:5%;"></div> <div style="width: 100%; left:50%; transform:translateX(-50%); position:absolute; top: 5vh; height:3px; background-image: linear-gradient(to right, rgba(0,0,0,0) ,rgba(0,0,0,1) 30% , rgba(0,0,0,1) 70%, rgba(0,0,0,0));"></div> <div style="width: 100%; left:50%; transform:translateX(-50%); position:absolute; top: -1px; height:3px; background-image: linear-gradient(to right, rgba(0,0,0,0) ,rgba(0,0,0,1) 30% , rgba(0,0,0,1) 70%, rgba(0,0,0,0));"></div> <div style="width: 100%; left:50%; transform:translateX(-50%); position:absolute; top: -4px; height:3px; background-image: linear-gradient(to right, rgba(255,255,255,0) ,rgba(255,255,255,1) 30% , rgba(255,255,255,1) 70%, rgba(255,255,255,0));"></div> <div style="width: 80%; left:50%; transform:translateX(-50%); position:absolute; bottom:0vh; height: calc(4vh + 1px); background-image: linear-gradient(to right, rgba(255,239,127,0) ,rgba(255,239,127,1) 45% , rgba(255,239,127,1) 55%, rgba(255,239,127,0));"></div> <div style="opacity:0.6; width: 80%; left:50%; transform:translateX(-50%); position:absolute; bottom:0vh; height: calc(4vh + 1px); background-image: url('images/diagmonds.png');background-repeat:repeat; background-size:5%;"></div> <div style="width: 80%; left:50%; transform:translateX(-50%); position:absolute; bottom: 4vh; height:3px; background-image: linear-gradient(to right, rgba(0,0,0,0) ,rgba(0,0,0,1) 45% , rgba(0,0,0,1) 55%, rgba(0,0,0,0));"></div> <div style="width: 80%; left:50%; transform:translateX(-50%); position:absolute; bottom: -1px; height:3px; background-image: linear-gradient(to right, rgba(0,0,0,0) ,rgba(0,0,0,1) 45% , rgba(0,0,0,1) 55%, rgba(0,0,0,0));"></div> <div style="width: 80%; left:50%; transform:translateX(-50%); position:absolute; bottom: -4px; height:3px; background-image: linear-gradient(to right, rgba(255,255,255,0) ,rgba(255,255,255,1) 45% , rgba(255,255,255,1) 55%, rgba(255,255,255,0));"></div> <div style="color: rgb(56,157,211); position:absolute; top:1.25vh; height:3vh; left: 5%; width:10%; line-height:1em; font-size:2.5vh; text-align:center;"> <span>Menu</span> <<link "">> <<script>>UI.restart()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <div style="color: rgb(56,157,211); position:absolute; top:1.25vh; height:3vh; left: 25%; width:10%; line-height:1em; font-size:2.5vh; text-align:center;"> <span>Save</span> <<link "">> <<script>>UI.saves()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <div style="color: rgb(56,157,211); position:absolute; top:1.25vh; height:3vh; right: 5%; width:10%; line-height:1em; font-size:2.5vh; text-align:center;"> <<auto>> </div> <div style="color: rgb(56,157,211); position:absolute; top:1.25vh; height:3vh; right: 25%; width:10%; line-height:1em; font-size:2.5vh; text-align:center;"> <span>Skip</span> <<skip>> </div> <div style="position: absolute; bottom:0.5vh; line-height:1em; left:50%; transform:translateX(-50%); font-size: 75%;"> @@color: rgb(56,157,211);➤@@ </div> <div style="font-size:75%; background-image:radial-gradient(rgb(12,97,175), rgb(55,156,210), rgb(136,241,253)) ;position: absolute; height:3vh; left:50%; transform:translateX(-50%); bottom:-2vh; border: 3px solid black; border-bottom:5px solid black; line-height:1em; padding: 0.5em; padding-left:1em; padding-right:1em; text-align:center; border-radius:50%; overflow:hidden;"> <div style="position:absolute; top:0;left:0;height:100%;width:100%; background-image:url('images/redox-02.png'); background-repeat:repeat;"></div> <div style="opacity:0.7;position:absolute; height:2.5vh; width:2.5vh; top:5%; left:2.5%; border-radius:50%; background-image:radial-gradient(rgba(255,255,255,1) 10%, rgba(255,255,255,0.3), rgba(255,255,255,0));"></div> <div style="opacity:0.7;position:absolute; height:1vh; width:1vh; top:3.5%; left:22.5%; border-radius:50%; background-image:radial-gradient(rgba(255,255,255,1) 10%, rgba(255,255,255,0.3), rgba(255,255,255,0));"></div> <div style="opacity:0.7;position:absolute; height:1.5vh; width:1.5vh; transform:rotate(-15deg); bottom:7.5%; right:10%; border-radius:50%; background-image:radial-gradient(rgba(255,255,255,1) 10%, rgba(255,255,255,0.3), rgba(255,255,255,0));"></div> <span id="wait" style="opacity:0.7;">⧖</span> </div> <div style="background-image:radial-gradient(rgb(12,97,175), rgb(55,156,210), rgb(136,241,253)) ;position: absolute; height:5vh; left:50%; transform:translateX(-50%); top:-4vh; border: 3px solid black; border-bottom:5px solid black; line-height:1em; padding: 2vw; padding-top:2.5vh; padding-bottom:2vh; border-radius:50%; overflow:hidden;"> <div style="position:absolute; top:0;left:0;height:100%;width:100%; background-image:url('images/redox-02.png'); background-repeat:repeat;"></div> <div style="opacity:0.7;position:absolute; height:5vh; width:5vh; top:10%; left:5%; border-radius:50%; background-image:radial-gradient(rgba(255,255,255,1) 10%, rgba(255,255,255,0.3), rgba(255,255,255,0));"></div> <div style="opacity:0.7;position:absolute; height:2.5vh; width:2.5vh; top:7%; left:25%; border-radius:50%; background-image:radial-gradient(rgba(255,255,255,1) 10%, rgba(255,255,255,0.3), rgba(255,255,255,0));"></div> <div style="opacity:0.7;position:absolute; height:1.5vh; width:5vh; transform:rotate(-15deg); bottom:10%; right:10%; border-radius:50%; background-image:radial-gradient(rgba(255,255,255,1) 10%, rgba(255,255,255,0.3), rgba(255,255,255,0));"></div> @@opacity:0.7;Opaline@@ </div> <div class="forward" id="text" style="position:absolute; top: calc(6vh + 5px); bottom: calc(5vh + 5px); left: 0; line-height:1.2em; padding-left:5vw; padding-right:5vw; box-sizing:border-box; overflow:auto; width:100%;"> <span> <<type 30ms>> _contents <</type>> </span> <<link "">> <<replace "#text">> <span> _contents </span> <<link "">> <<set $count++>> <<goto play>> <</link>> <</replace>> <<replace "#wait">> ➤ <<link "">> <<set $count++>> <<goto "play">> <</link>> <</replace>> <</link>> </div> </div>
<div class="box" style="overflow:visible;"> <div style="position:absolute; width:100%; height:100%; left:0; top:0; opacity:0.9; -webkit-filter: drop-shadow(3px 3px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white); ; filter: drop-shadow(3px 3px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white);"> <div style="width: calc(100% + 6px); background: #e3d3b6; background-image: url('images/rough-cloth-light.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -5px; top:0vh; height:4vh; border:1px solid black; border-radius: 5px; transform:rotate(0.3deg);"></div> <div style="width: calc(100% + 6px); background: #e3d3b6; background-image: url('images/rough-cloth-light.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -5px; top:0.2vh; height:4vh; border:1px solid black; border-radius: 5px; transform:rotate(-1deg);"></div> <div style="width: calc(100% + 10px); background: #fff7db; background-image: url('images/rough-cloth-light.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -7px; top:0vh; height:4vh; border:2px solid black; border-radius: 5px; transform:rotate(-0.4deg);"></div> <div style="width: calc(100% + 6px); background: #e3d3b6; background-image: url('images/rough-cloth-light.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -5px; bottom:0vh; height:3vh; border:1px solid black; border-radius: 5px; transform:rotate(-0.3deg);"></div> <div style="width: calc(100% + 6px); background: #e3d3b6; background-image: url('images/rough-cloth-light.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -5px; bottom:0.2vh; height:3vh; border:1px solid black; border-radius: 5px; transform:rotate(1deg);"></div> <div style="width: calc(100% + 10px); background: #fff7db; background-image: url('images/rough-cloth-light.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -7px; bottom:0vh; height:3vh; border:2px solid black; border-radius: 5px; transform:rotate(0.4deg);"></div> <div style="position:absolute; opacity:0.9; top:50%; transform:translateY(-50%); left:0; height:120%; width:100%; background-image:url('images/borisbox2.png'); background-size: 100% 100%; background-repeat: no-repeat; }"> </div> </div> <div style="-webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) ; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black);"> <div style="width: calc(100% + 6px); background: #e3d3b6; background-image: url('images/rough-cloth-light.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -5px; top:0vh; height:4vh; border:1px solid black; border-radius: 5px; transform:rotate(0.3deg);"></div> <div style="width: calc(100% + 6px); background: #e3d3b6; background-image: url('images/rough-cloth-light.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -5px; top:0.2vh; height:4vh; border:1px solid black; border-radius: 5px; transform:rotate(-1deg);"></div> <div style="width: calc(100% + 10px); background: #fff7db; position:absolute; left: -7px; top:0vh; height:4vh; border:2px solid black; border-radius: 5px; transform:rotate(-0.4deg);"> <div style="position:absolute; left:0; right:0; top:0; bottom:0; background: linear-gradient(rgba(0,0,0,0), rgba(185,157,133,0.7)); background-size:25%; "></div> <div style="position:absolute; left:0; right:0; top:0; bottom:0; background-image: url('images/rough-cloth-light.png'); background-repeat:repeat; background-size:25%; "></div> <div style="color: #e3d3b6; position:absolute; top:0.75vh; height:3vh; left: 5%; width:10%; line-height:1em; font-size:2.5vh; text-align:center;"> <span>Menu</span> <<link "">> <<script>>UI.restart()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <div style="color: #e3d3b6; position:absolute; top:0.75vh; height:3vh; left: 25%; width:10%; line-height:1em; font-size:2.5vh; text-align:center;"> <span>Save</span> <<link "">> <<script>>UI.saves()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <div style="color: #e3d3b6; position:absolute; top:0.75vh; height:3vh; right: 5%; width:10%; line-height:1em; font-size:2.5vh; text-align:center;"> <<auto>> </div> <div style="color: #e3d3b6; position:absolute; top:0.75vh; height:3vh; right: 25%; width:10%; line-height:1em; font-size:2.5vh; text-align:center;"> <span>Skip</span> <<skip>> </div> </div> </div> <div style="position:absolute; top:0; left:0; height:100%; width:100%; -webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) ; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black);"> <div style="width: calc(100% + 6px); background: #e3d3b6; background-image: url('images/rough-cloth-light.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -5px; bottom:0vh; height:3vh; border:1px solid black; border-radius: 5px; transform:rotate(-0.3deg);"></div> <div style="width: calc(100% + 6px); background: #e3d3b6; background-image: url('images/rough-cloth-light.png'); background-repeat:repeat; background-size:25%; position:absolute; left: -5px; bottom:0.2vh; height:3vh; border:1px solid black; border-radius: 5px; transform:rotate(1deg);"></div> <div style="width: calc(100% + 10px); background: #fff7db;position:absolute; left: -7px; bottom:0vh; height:3vh; border:2px solid black; border-radius: 5px; transform:rotate(0.4deg);"> <div style="position:absolute; left:0; right:0; top:0; bottom:0; background: linear-gradient(rgba(0,0,0,0), rgba(185,157,133,0.7)); background-size:25%; "></div> <div style="position:absolute; left:0; right:0; top:0; bottom:0; background-image: url('images/rough-cloth-light.png'); background-repeat:repeat; background-size:25%; "></div> </div> </div> <div style="height:auto; width:6%; height: 12%; position:absolute; bottom:-0.25em; rotate(10deg); border-radius: 5px; background: #8E8E8E; left: 50%; padding:0.25em; transform:translateX(-50%); line-height:1em; font-size:100%; text-align:center; -webkit-filter: drop-shadow(2px 2px black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black); filter: drop-shadow(2px 2px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) "> <div style="position: absolute; width:100%; height:100%; box-sizing:border-box; left:0; top:0; opacity:0.7; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1))"></div> </div> <div style="height:auto; width:6%; height: 12%; position:absolute; bottom:-0.25em; rotate(10deg); border-radius: 5px; background-image: url('images/rust.jpg'); background-repeat: repeat; background-size:75%; left: 50%; padding:0.25em; transform:translateX(-50%); line-height:1em; font-size:100%; text-align:center; opacity:0.7; -webkit-filter: drop-shadow(3px 2px black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black); filter: drop-shadow(3px 2px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) "> <div style="position: absolute; width:100%; height:100%; box-sizing:border-box; left:0; top:0; opacity:0.1; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1))"></div> <span id="wait" style="opacity:0.9;">⧖</span> </div> <div style="height:auto; width:auto; height: auto; position:absolute; top:-5%; rotate(-10deg); border-radius: 5px; background: #8E8E8E; left: 50%;padding: 1em; padding-bottom:0em; transform:translateX(-50%); line-height:1em; padding-top:0.1em; text-align:center; font-size:150%; -webkit-filter: drop-shadow(3px 2px black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black); filter: drop-shadow(3px 2px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) "> <span>Boris</span> <div style="position: absolute; width:100%; height:100%; box-sizing:border-box; left:0; top:0; opacity:0.7; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1))"></div> </div> <div style="height:auto; width:auto; height: auto; position:absolute; top:-5%; rotate(-10deg); border-radius: 5px; background-image: url('images/rust.jpg'); background-repeat: repeat; background-size:75%; left: 50%;padding: 1em; padding-bottom:0em; transform:translateX(-50%); line-height:1em; padding-top:0.1em; text-align:center; opacity:0.7; font-size:150%; -webkit-filter: drop-shadow(3px 2px black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black); filter: drop-shadow(3px 2px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) "> <span style="opacity:0.5">Boris</span> </div> <div class="forward" id="text" style="position:absolute; top: calc(6vh + 5px); bottom: calc(6vh + 5px); left: 0; line-height:1.2em; padding-left:5vw; padding-right:5vw; box-sizing:border-box; overflow:auto; width:100%;"> <span> <<type 30ms>> _contents <</type>> </span> <<link "">> <<replace "#text">> <span> _contents </span> <<link "">> <<set $count++>> <<goto play>> <</link>> <</replace>> <<replace "#wait">> ➤ <<link "">> <<set $count++>> <<goto "play">> <</link>> <</replace>> <</link>> </div> </div>
<div class="box" overflow:visible;> <div style="position: absolute; top:5%; bottom:5%; opacity:0.5; left:50%; transform:translateX(-50%); width:100vw; background-image:url('images/nice-snow.png'); background-repeat: repeat; background-size:50%;"> </div> <div style="position: absolute; top:5%; bottom:5%; opacity:0.8; left:50%; transform:translateX(-50%); width:100vw; background-image: linear-gradient(to right, rgba(0,0,0,0) ,rgba(0,0,0,1) 30% , rgba(0,0,0,1) 70%, rgba(0,0,0,0));"> </div> <div style="position: absolute; top:5%; height:2px; left:50%; transform:translateX(-50%); width:100vw; background-image: linear-gradient(to right, rgba(255,255,255,0) ,rgba(255,255,255,1) 30% , rgba(255,255,255,1) 70%, rgba(255,255,255,0));"></div> <div style="position: absolute; bottom:5%; height:2px; left:50%; transform:translateX(-50%); width:100vw; background-image: linear-gradient(to right, rgba(255,255,255,0) ,rgba(255,255,255,1) 30% , rgba(255,255,255,1) 70%, rgba(255,255,255,0));"></div> <div class="forward" id="text" style="position:absolute; top: calc(7vh + 5px); bottom: calc(6vh + 5px); left: 0; width:100%; line-height:1.2em; padding-left:5vw; padding-right:5vw; box-sizing:border-box; overflow:auto; width:100%;"> <span> <<type 30ms>> _contents <</type>> </span> <<link "">> <<replace "#text">> <span> _contents </span> <<link "">> <<set $count++>> <<goto play>> <</link>> <</replace>> <<replace "#wait">> ➤ <<link "">> <<set $count++>> <<goto "play">> <</link>> <</replace>> <</link>> </div> <div style="position:absolute; top:4vh; height:3vh; left: 15%; width:10%; line-height:1em; border-bottom: 1px solid white; font-size:3vh; text-align:center; opacity:0.5;"> <span>Menu</span> <<link "">> <<script>>UI.restart()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <div style="position:absolute; top:4vh; height:3vh; left: 30%; width:10%; line-height:1em; border-bottom: 1px solid white; font-size:3vh; text-align:center; opacity:0.5;"> <span>Save</span> <<link "">> <<script>>UI.saves()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <div style="position:absolute; top:4vh; height:3vh; right: 30%; width:10%; line-height:1em; border-bottom: 1px solid white; font-size:3vh; text-align:center; opacity:0.5;"> <span>Skip</span> <<skip>> </div> <div style="position:absolute; top:4vh; height:3vh; right: 15%; width:10%; line-height:1em; border-bottom:1px solid white; font-size:3vh; text-align:center; opacity:0.5;"> <<auto>> </div> <div style="position:absolute; bottom:3vh; height:3vh; left: 50%; transform:translateX(-50%); width:auto; line-height:1em; font-size:3vh;"> <div style="float:left; margin-top: calc(1.5vh - 1px); width: 10vw; height:2px; background:white;opacity:0.5;"> </div> <div style="float:left;padding-left:5px; padding-right:5px; margin-top:0.1vh;"> <span id="wait">⧖</span> </div> <div style="float:left; margin-top: calc(1.5vh - 1px); width: 10vw; height:2px; background:white;opacity:0.5;"> </div> </div> </div>
<<replace "#back">> <div class="villa" style="position:fixed; left:0; bottom:0; width:100%; height:100%"></div> <</replace>> <<switch $count>> <<case 0>> <<char>>Expensive artwork fills every available space of Sir Ingot's mansion. Paintings of war heroes on their majestic steeds, gold-embellished porcelaine vases, and right in the center of the room the sculpture of a half-naked woman in a seductive pose.<</char>> <<case 1>> <div class="sprite fadein" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char>>All of them are utterly beautiful, precious, and flawless... and Opaline feels small and insignificant standing among them.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char>>She brought a book along for her visit, and now she squeezes it tightly against her chest, the hard-bound paper forming a small shield against the world. Her hands tremble slightly with each breath.<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char>>If she could be like Mya Tempest, the main character from the novel, then maybe she wouldn't feel this vulnerable and weak.<</char>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char>>She's not like Mya Tempest at all of course, but just picturing herself like this gives her a little comfort.<</char>> <<case 5>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideR"> <img src="images/characters/opaline/sad2.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <div class="slideR"> <img class="fadein" style="transform: scaleX(-1)" src="images/characters/ingot/neutral.png"> </div> </div> </div> <<char>>The sharp snap of Sir Ingot's shoes on the marble tiles causes her to snap out of her little daydream.<</char>> <<case 6>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img style="transform: scaleX(-1)" src="images/characters/ingot/neutral.png"> </div> </div> <<char>>A tension spreads through her body, as if a giant hand has grown from the ground beneath, and wrapped its fingers around her from every side.<</char>> <<case 7>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img style="transform: scaleX(-1)" src="images/characters/ingot/neutral.png"> </div> </div> <<char "opaline">> …<</char>> <<case 8>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="slideR"> <img src="images/characters/opaline/sad1.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <div class="slideR"> <img style="transform: scaleX(-1)" src="images/characters/ingot/smug.png"> </div> </div> </div> <<char "ingot">>And this over here is my newest acquisition. 'Goddess of the moon' - pure white marble - one of the most beautiful works Elandre has ever sculpted.<</char>> <<case 9>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="turn"> <div class="slideR"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> </div> <<char>>He motions towards the white sculpture that stands in the center of the room. It depicts a young woman in a flowing robe that appears to be in the process of slipping off her body.<</char>> <<case 10>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <div class="turn"> <div class="slideL"> <img style="transformX(-20%);" src="images/characters/ingot/neutral.png"> </div> </div> </div> <<char "ingot">>People keep wondering who she might have used as a reference. There's some wild stories about her having fallen in love with one of the servant girls, and that this statue was the only way for her to express this forbidden love. <</char>> <<case 11>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="turn"> <div class="slideR"> <img style="transform: scaleX(-1);" src="images/characters/ingot/smug.png"> </div> </div> </div> <<char "ingot">>A silly idea, but I guess certain people just love to make up these silly dramatic romance stories in their head. Women especially. Isn't that right, little gem?<</char>> <<case 12>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <div class="turn"> <img style="transformX(-20%);" src="images/characters/ingot/smug.png"> </div> </div> <<char "opaline">> …y-yes…<</char>> <<case 13>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <div class="slideR"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <<char "ingot">> Don't be shy. Come a little closer, so you can take in all the details.<</char>> <<case 14>> <<replace "#effect">> <</replace>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideR"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <<char "opaline">> …<</char>> <<case 15>> <<if not document.getElementById("claw")>> <<replace "#effect">> <div id="claw" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <</replace>> <</if>> <div id="opa" class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="jump" src="images/characters/opaline/scared1.png"> </div> <<timed 1s>> <<replace "#opa">> <img class="shake" src="images/characters/opaline/sad3.png"> <</replace>> <</timed>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char>> Before she can muster the strength to respond, Ingot is already there, one hand locking around her wrist as he pulls her closer.<</char>> <<case 16>> <<if not document.getElementById("claw")>> <<replace "#effect">> <div id="claw" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <</replace>> <</if>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char>>She can feel his nails dig into her fur, their sharp outlines biting into the soft skin underneath as he forces her closer.<</char>> <<case 17>> <<if not document.getElementById("claw")>> <<replace "#effect">> <div id="claw" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <</replace>> <</if>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char>>The pressure is just at the cusp of being painful, but not quite there yet. It is definitively uncomfortable, but who knows how Ingot will react if she were to tell him.<</char>> <<case 18>> <<replace "#effect">> <div class="fadeout" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <</replace>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <div style="position:fixed; left:50%; top:50%; transform: translate(-50%, -50%);"> <div class="slideR"> <div class="fadein option" style="transform: translateX(-20%);"> She should tell him to let go. <<link "">> <<set $passage to "A1S1P1-O1">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> <div class="slideL"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> She should try to ignore it. <<link "">> <<set $passage to "A1S1P1-O2">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> </div> <<set setup.skip to false>> <</switch>>
<<set $count to 0>> <<set $passage to "A1S1P1">> <<set setup.skip to false>> <<set setup.auto to false>> <<event ':typingcomplete'>> <<replace "#text">><<nobr>> <span> <<print setup.contents>> </span> <<link "">> <<set $count++>> <<goto "play">> <</link>> <</nobr>><</replace>> <<replace "#wait">><<nobr>> ➤ <<link "">> <<set $count++>> <<goto "play">> <</link>> <</nobr>><</replace>> <<if setup.auto>> <<timed 0.5s>> <<set $count++>> <<goto "play">> <</timed>> <</if>> <</event>>
<<replace "#txt">> <<include $passage>> <<if State.length > 2>> <div class="whitetxt" style="position: fixed; bottom:0; left:0.25vw; line-height:1.5em; padding-top:0.5em; font-weight:1200;"> <span style="font-size: 400%;-webkit-filter: drop-shadow(3px 3px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white); ; filter: drop-shadow(3px 3px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white);">⇐</span> <<link "">> <<if $count eq 0>> <<replace "#effect">><</replace>> <</if>> <<run Engine.backward()>> <</link>> </div> <</if>> <<print ' <<if recall("' + $passage + '", 0) lt $count>> <<set setup.skip to false>> <<run memorize("' + $passage + '", $count)>> <</if>> '>> <<if setup.skip>> <<set $count++>> <<goto "play">> <</if>> <</replace>>
<<widget "char" container>> <<set setup.contents to _contents>> <<if ndef _args[0]>> <<include "narration">> <<elseif _args[0] eq "Sir Everhart" or _args[0] eq "Snively" or _args[0] eq "Merchant">> <<include "upper">> <<elseif _args[0] eq "ingot" or _args[0] eq "rora" or _args[0] eq "opaline" or _args[0] eq "boris">> <<include _args[0]>> <<else>> <<include "lower">> <</if>> <</widget>>
<<replace "#back">> <div class="villa" style="position:fixed; left:0; bottom:0; width:100%; height:100%"></div> <</replace>> <<replace "#effect">> <</replace>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char>> Maybe it's better to remain silent about this anyway. Ingot hasn't actually done anything wrong after all. She's always been far too sensitive for everything.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "ingot">>Just look at the fine details in her expression. There's some sort of sadness in there, isn't it? Like she's just holding back her tears.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "opaline">> …yes… I- I can see that…<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "ingot">> I think that's what really elevates this artwork to true beauty, this subtle little hint of emotion - something that most regular people would completely miss.<</char>> <<case 4>> <div class="fadein" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char>> The pressure of his hand tightens even more. The tips of his claws sink into her fur - a set of sharp pin pricks against her skin.<</char>> <<case 5>> <div class="fadeout" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "ingot">>This beauty is what really convinced me to buy the sculpture, you know. It cost a fortune, but I just love to own beautiful things.<</char>> <<case 6>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "ingot">>Speaking of beauty - you are quite beautiful yourself, you know that? <</char>> <<case 7>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "opaline">> I… I don't think I'm-<</char>> <<case 8>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/smug.png"> </div> <<char "ingot">> Oh but you are. Even if a lot of people might call you plain or boring.<</char>> <<case 9>> <div class="fadein" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char>> With every word he speaks the sharp sting his touch intensifies. He leans in closer, a thin smile flickering across his face, as his eyes roam over her face.<</char>> <<case 10>> <div class="fadeout" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "ingot">> Do you know how you first caught my eyes?<</char>> <<case 11>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "opaline">> … no …<</char>> <<case 12>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "ingot">> It was at the autumn gala. Everybody was dressed up in flashy little costumes, vying for attention, dancing and laughing…<</char>> <<case 13>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "ingot">> And there you were, standing in the corner - shivering - with little tears in your eyes as if you'd break out crying at any moment.<</char>> <<case 14>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/smug.png"> </div> <<char "ingot">> I think a lot of people would have called you ugly back then. I'm sure a lot of them did actually. But not me… I just have an eye for little emotions like these…<</char>> <<case 15>> <div class="fadein" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char>> His nails begin scratching along her wrist, up and down. Each motion causes her breath to hitch in her throat, and his eyes widen with visible excitement.<</char>> <<case 16>> <div class="fadeout" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char>> Her free arm still clings to her book, and she presses it against her chest even harder, hoping that it will somehow help to muffle the trembling beat of her heart.<</char>> <<case 17>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "ingot">> And what's that you have there?<</char>> <<case 18>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "opaline">> It's nothing. J-just a book I'm reading.<</char>> <<case 19>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/smug.png"> </div> <<char "ingot">> A book? Well - you don't need that right now, do you? You have me to keep you entertained. What kind of book is it? Let me see!<</char>> <<case 20>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "opaline">> It's just… just a silly story about… - Wait!<</char>> <<case 21>> <div id="opa" class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="jump" src="images/characters/opaline/scared1.png"> </div> <<timed 1s>> <<replace "#opa">> <img src="images/characters/opaline/sad1.png"> <</replace>> <</timed>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="slideL"> <div class="turn"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> </div> </div> <<char>> His hands darts out, and the little square of printed paper that served as her only protection is suddenly yanked away. <</char>> <<case 22>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <div class="slideL"> <img src="images/characters/opaline/sad2.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideL"> <img src="images/characters/ingot/irritated.png"> </div> </div> <<char "ingot">> "Mya Tempest - Flames of the Undercity " - good god, it's one of those trashy romance novels, isn't it?<</char>> <<case 23>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="slideL"> <img src="images/characters/opaline/sad2.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <div class="slideL"> <div class="slideL"> <div class="turn" style="animation-delay:1s;"> <img src="images/characters/ingot/irritated.png"> </div> </div> </div> </div> <<char "opaline">> I-it's not… it's not that bad… it's just - just something…<</char>> <<case 24>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideR"> <img src="images/characters/opaline/sad1.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-110%);"> <div class="slideR"> <img style="transform: scaleX(-1);" src="images/characters/ingot/smug.png"> </div> </div> <<char "ingot">> 'He held her close, the pulsing heat of his rippling biceps warding off the dangers lurking in the dingy darkness of the slums - starlight illuminating the chiseled outlines of his masculine physique…'<</char>> <<case 25>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <div class="slideL"> <div class="turn"> <img style="transform: scaleX(-1);" src="images/characters/ingot/smug.png"> </div> </div> </div> <<char "ingot">> Hahaha - it's even worse than I had thought.<</char>> <<case 26>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-110%);"> <div class="slideR"> <div class="turn"> <img src="images/characters/ingot/smug.png"> </div> </div> </div> <<char>> He flips through the book, his head shaking with a disdainful smirk every now and then - but at least he has let go of her arm for the moment.<</char>> <<case 27>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <div class="slideL"> <div class="turn"> <img style="transform: scaleX(-1);" src="images/characters/ingot/smug.png"> </div> </div> </div> <<char "ingot">> And it's all set in the common quarters as well. How cute. I hope you know that things down there are not quite as picturesque as this story claims.<</char>> <<case 28>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-110%);"> <div class="slideR"> <div class="turn"> <img src="images/characters/ingot/smug.png"> </div> </div> </div> <<char "opaline">> No… I know… I know it's just a story… I-<</char>> <<case 29>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/irritated.png"> </div> <<char "ingot">> It's filth, drugs, and violence, and not much else. There are no noble handsome heroes waiting to rescue some lost little girl down there. It's all just addicts and criminals.<</char>> <<case 30>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/irritated.png"> </div> <<char "ingot">> And trust me - if they found somebody like you in one of their alleys, then help and protection would be the last thing on their mind.<</char>> <<case 31>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "opaline">> I- I know…<</char>> <<case 32>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <div class="slideL"> <div class="turn"> <img style="transform: scaleX(-1);" src="images/characters/ingot/smug.png"> </div> </div> </div> <<char "ingot">> What a terrible little book. Hilariously bad. But that's just what I said earlier, about silly girls enjoying these sorts of silly romance stories, didn't I?<</char>> <<case 33>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-110%);"> <div class="slideR"> <div class="turn"> <img src="images/characters/ingot/smug.png"> </div> </div> </div> <<char "ingot">> But don't worry. You can learn to leave this sort of nonsense behind. You just need some guidance. I'm sure I could teach you about appreciating some real art one of these days.<</char>> <<case 34>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/smug.png"> </div> <<char "ingot">> Maybe we could visit the opera. I heard Swanson's newest play is utterly brilliant. Nothing at all like this grotesque garbage you've been reading.<</char>> <<case 35>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/smug.png"> </div> <<char "ingot">> I'm sure your parent's would happily agree to another little meeting between us…<</char>> <<case 36>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char>> He closes the book, and for a second it seems as if he is about to hand it back, but as Opaline reaches out, he tosses it to the side with a carefree flick of his wrist.<</char>> <<case 37>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<char "ingot">> But we're getting distracted. What were we talking about? Ah right! The autumn gala - and you standing there in the corner about to cry…<</char>> <<case 38>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <div class="slideR"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <<char "ingot">> That's when I noticed you the first time, and the beauty that was slumbering inside of you.<</char>> <<case 39>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="slideR" style="animation-delay:0.5s;"> <img src="images/characters/opaline/sad1.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <div class="slideR"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <<char>> He takes a step closer, his frame suddenly feeling tall and dark, and Opaline can't help herself but to stumble backwards.<</char>> <<case 40>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideR"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <<char>> He takes another step, and she stumbles away again - and again - and again - until there is suddenly no room to retreat to anymore, and she is trapped between him and the wall.<</char>> <<case 41>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="shake"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <<char "ingot">> It's like with Elandre's marble statue - those emotions of fear and sadness just beneath the surface.<</char>> <<case 42>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="shake"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <<char "opaline">> …<</char>> <<case 43>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="shake"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <<char>> Her mouth snaps open and shut, little whimpers escaping her throat, but no words other than that.<</char>> <<case 44>> <<if not document.getElementById("claw")>> <<replace "#effect">> <div id="claw" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <</replace>> <</if>> <div id="opa" class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="jump" src="images/characters/opaline/scared.png"> </div> <<timed 1s>> <<replace "#opa">> <img class="shake" src="images/characters/opaline/sad3.png"> <</replace>> <</timed>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="shake"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <<char>> He raises his hand, one finger extended towards her face, the tip of the sharp claw faintly touching the soft skin just beneath her eye. It slides over it, tracing the twitching outlines.<</char>> <<case 45>> <<if not document.getElementById("claw")>> <<replace "#effect">> <div id="claw" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <</replace>> <</if>> <div id="#opa" class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="shake"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <<char "ingot">> And there you go again. Starting to cry. <</char>> <<case 46>> <<replace "#effect">> <div id="claw" class="fadeout" style="background:rgba(0,0,0,0.8); background-image: url('images/claw.gif'); background-size: contain; background-repeat:no-repeat; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <</replace>> <div id="#opa" class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="shake"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <<char>> He lifts the claw away, revealing the sparkling wetness staining its outlines.<</char>> <<case 47>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="shake"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <<char "ingot">> Why are you crying, little gem? I'm just complimenting you. I'm telling you that you are beautiful.<</char>> <<case 48>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="slideR"> <div class="slideL" style="animation-delay:0.2s"> <div class="shake"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> </div> </div> <<char>> He pushes even closer. His eyes widen with sudden excitement, hungrily drinking in every little shiver of her pained expression, his breath hot against her face - …<</char>> <<case 49>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/irritated.png"> </div> <<char>> A sudden knock on the door rips through the tension.<</char>> <<case 50>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/irritated.png"> </div> <div class="sprite LOtoC" style="transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/snively.png"> </div> <<char "Snively">>Sir Ingot?<</char>> <<case 51>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="turn"> <img style="transform: scaleX(-1);" src="images/characters/ingot/irritated.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-110%);"> <img style="transform: scaleX(-1);" src="images/characters/npc/snively.png"> </div> <<char "ingot">> Snively… you are interrupting!<</char>> <<case 52>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/ingot/irritated.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-110%);"> <img style="transform: scaleX(-1);" src="images/characters/npc/snively.png"> </div> <<char "Snively">>I'm sorry, but Sir Everhart has arrived to pick up his daughter.<</char>> <<case 53>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/ingot/neutral.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-110%);"> <img style="transform: scaleX(-1);" src="images/characters/npc/snively.png"> </div> <<char "ingot">> Of course. Send him in!<</char>> <<case 54>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="slideL"> <img src="images/characters/ingot/neutral.png"> </div> </div> <div class="sprite CtoLO" style="transform:translateX(-110%);"> <div class="turn"> <img style="transform: scaleX(-1);" src="images/characters/npc/snively.png"> </div> </div> <<char>> Within the blink of an eye Ingot has stepped away from her. Only his hand remains resting lightly on her shoulder, as her father enters the room.<</char>> <<case 55>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/ingot/neutral.png"> </div> <div class="sprite LOtoC" style="transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> <<char "Sir Everhart">> Ah, Opaline! There's my little darling. And Sir Ingot - always a pleasure. I hope my daughter wasn't too much to handle.<</char>> <<case 56>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/ingot/smug.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> <<char "ingot">> Sir Everhart. So delighted to see you. And no worries - Opaline was on her best behaviour - as she is always.<</char>> <<case 57>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="turn"> <img src="images/characters/ingot/smug.png"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> <<char "ingot">> I was just showing her the newest additions to my art collection. Isn't that right, little gem?<</char>> <<case 58>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideR"> <img style="transform:scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> <<char>> His finger crawls against the side of her throat, stroking up and down in an almost gentle manner.<</char>> <<case 59>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform:scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> <<char "opaline">> …y-yes…<</char>> <<case 60>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="turn"> <img style="transform:scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> <<char "Sir Everhart">>Ah - of course. You do have quite the impressive collection. Is this one new?<</char>> <<case 61>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="slideL"> <img src="images/characters/ingot/smug.png"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> <<char "ingot">> Yes - Goddess of the Moon - Elandre's Unnamed Lover - Had to pay more for this little statue than I paid for this entire mansion. But it's not as if I am lacking when it comes to money.<</char>> <<case 62>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/ingot/neutral.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> <<char "Sir Everhart">> Of course. And - well - since you brought it up - there was that business proposition you and I wanted to talk about…<</char>> <<case 63>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/ingot/neutral.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> <<char "ingot">> Yes - we can go over the details right now. But let me offer you a drink first.<</char>> <<case 64>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="turn"> <img src="images/characters/ingot/smug.png"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> <<char "ingot">> I'm sure Opaline can keep herself amused on her own for a little. Business-talk like this might be a bit too complicated for that little head of hers.<</char>> <<case 65>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img style="transform:scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> <<char "opaline">> …yes…<</char>> <<case 66>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideR"> <img style="transform:scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> <<char>>He lets his claw trail one last time against the exposed side of her shoulder.<</char>> <<case 67>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite CtoLO" style="transform:translateX(-30%);"> <div class="turn"> <img style="transform:scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> </div> <div class="sprite CtoLO" style="transform:translateX(-110%);"> <div class="turn"> <img style="transform:scaleX(-1);" src="images/characters/npc/everhart.png"> </div> </div> <<char>>Then it lifts away, and the two men retreat towards the study.<</char>> <<case 68>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <div class="slideL"> <img src="images/characters/opaline/sad2.png"> </div> </div> <<char>> Opaline is left standing alone, but even without the touch on her shoulder it takes a long time until her body feels like it is ready to move on its own again.<</char>> <<case 69>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="slideL"> <img src="images/characters/opaline/sad1.png"> </div> </div> <<char>> Her book still lies crumbled on the floor, the pages bend and creased. She picks it up, and squeezes it against her chest once more, but the sense of protection it used to grant has vanished.<</char>> <<case 70>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad.png"> </div> <<char "opaline">> Just a stupid story... Just a stupid story for stupid girls like me...<</char>> <<case 71>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char>> She leans against the window, and looks down at the gleaming golden neon lights of the upper city, which awaken one after the other as the sun retreats further and further past the horizon.<</char>> <<case 72>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char>> The lights stretch all across the elevated hills, some even touching the surrounding areas, but the further her gaze travels, the more the lights change.<</char>> <<case 73>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char>> Down there the lower city begins, and the bright golden glow becomes replaced by seedy flickering lights of red and blue, illuminating corrugated sheets of rusting metals and graffiti covered blocks of concrete.<</char>> <<case 74>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char>> This is the real lower city - not the place of adventure and fateful encounters from her book - but a place filled with drugs and murder and filth.<</char>> <<case 75>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad3.png"> </div> <<char "opaline">> …it's stupid…<</char>> <<case 76>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad3.png"> </div> <<char>> She hugs the book closer. The comfort still refuses to come.<</char>> <<case 77>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad.png"> </div> <<char "opaline">> Just a silly story for stupid girls like me…<</char>> <<case 78>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad.png"> </div> <<char>> The story in her book has nothing to do with reality of course. She knows that. And yet she can't look away from the sight of the lower city. <</char>> <<case 79>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/opaline/sad2.png"> </div> <div class="fadein" style="opacity:0; position: fixed; background:black; top:0; left:0; right:0; bottom:0;"> </div> <<char>> How would it feel to be living down there? Free of judgment and pressure and expectations - free to do whatever you want and be with whoever you want…<</char>> <<set $passage to "A1S2P1">> <<set $count to -1>> <</switch>>
<<replace "#back">> <div class="villa" style="position:fixed; left:0; bottom:0; width:100%; height:100%"></div> <</replace>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<switch $count>> <<case 0>> <<char>> She opens her mouth, to say… something… <</char>> <<case 1>> <<char "opaline">> …<</char>> <<case 2>> <<char>> But she doesn't even know what exactly she should be telling him, and then the hand clutching her wrist tightens ever so slightly, and the pressure makes any resolve within her crumble.<</char>> <<case 3>> <<char>> The unspoken words die on her tongue. This is how it always goes. There are so many things she hates about her life, but she just doesn't have the strength to do anything about any of them.<</char>> <<set $passage to "A1S1P2">> <<set $count to -1>> <</switch>>
<<replace "#back">> <div class="villa" style="position:fixed; left:0; bottom:0; width:100%; height:100%"></div> <</replace>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad3.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img style="transform: scaleX(-1);" src="images/characters/ingot/neutral.png"> </div> <<switch $count>> <<case 0>> <<char>> She lowers her head, and does her best to ignore the uncomfortable pressure, and the uneasy warmth radiating from his body.<</char>> <<case 1>> <<char>> This is how it always goes. There are so many things she hates about her life, and she just caves in and goes along with them all.<</char>> <<set $passage to "A1S1P2">> <<set $count to -1>> <</switch>>
<div class="box" style="overflow:visible;"> <div style="opacity:0.7; position:fixed; bottom:3vh; top: 66vh; left:5vw; right:5vw; -webkit-filter: drop-shadow(3px 3px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white); ; filter: drop-shadow(3px 3px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white); box-sizing:border-box;"> <div class="ingot"> </div> <div style=" opacity: 1; position:absolute; top: 1vh; left:50%; transform: translateX(-50%); width: 102%; height: 3vh; border-radius:3px; border-bottom:3px solid black; background-image:url('images/marble.jpg'); background-repeat:repeat; box-sizing:border-box;"> </div> <div style=" opacity: 1; position:absolute; top:-2vh; left:50%; transform: translateX(-50%); width: 103%; height: 5vh; border-radius:3px; border-bottom:3px solid black; background-image:url('images/marble.jpg'); background-repeat:repeat; box-sizing:border-box;"> </div> <div style=" opacity: 1; position:absolute; bottom:-5px; left:50%; transform: translateX(-50%); width: 103%; height: 5vh; border-radius:3px; border-bottom:3px solid black; background-image:url('images/marble.jpg'); background-repeat:repeat; box-sizing:border-box;"> </div> <div style=" opacity: 1; position:absolute; bottom: calc(3vh - 5px); left:50%; transform: translateX(-50%); width: 102%; height: 3vh; border-radius:3px; border-top:3px solid black; background-image:url('images/marble.jpg'); background-repeat:repeat; box-sizing:border-box;"> </div> </div> <div style=" opacity: 1; position:absolute; top: 1vh; left:50%; transform: translateX(-50%); width: 102%; height: 3vh; border-radius:3px; border-bottom:3px solid black; background-image:url('images/marble.jpg'); background-repeat:repeat; box-sizing:border-box;"> </div> <div style=" opacity: 1; position:absolute; top:-2vh; left:50%; transform: translateX(-50%); width: 103%; height: 5vh; border-radius:3px; border-bottom:3px solid black; background-image:url('images/marble.jpg'); background-repeat:repeat; box-sizing:border-box;"> <div style="position:absolute; top:1vh; height:100%; left: 10%; width:10%; line-height:1em; font-size:3vh; text-align:center; opacity:0.7;"> <span>Menu</span> <<link "">> <<script>>UI.restart()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <div style="position:absolute; top:1vh; height:100%; left: 25%; width:10%; line-height:1em; font-size:3vh; text-align:center; opacity:0.7;"> <span>Save</span> <<link "">> <<script>>UI.saves()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <div style="position:absolute; top:1vh; height:100%; right: 25%; width:10%; line-height:1em; font-size:3vh; text-align:center; opacity:0.7;"> <span>Skip</span> <<skip>> </div> <div style="position:absolute; top:1vh; height:100%; right: 10%; width:10%; line-height:1em; font-size:3vh; text-align:center; opacity:0.7;"> <<auto>> </div> <div style="position: absolute; left:50%; top:0; transform:translateX(-50%); border-radius:0px; border-bottom: 3px solid black; border-left: 3px solid black; border-right: 3px solid black; border-radius:3px; background-image:url('images/marble.jpg'); background-repeat:repeat; padding: 1em; padding-top: 0.3em; padding-bottom: 0.3em; line-height:1em; "> <span>_args[0]</span> </div> </div> <div style=" opacity: 1; position:absolute; bottom: calc(3vh - 5px); left:50%; transform: translateX(-50%); width: 102%; height: 3vh; border-radius:3px; border-top:3px solid black; background-image:url('images/marble.jpg'); background-repeat:repeat; box-sizing:border-box;"> </div> <div style=" opacity: 1; position:absolute; bottom:-5px; left:50%; transform: translateX(-50%); width: 103%; height: 5vh; border-radius:3px; border-top:3px solid black; background-image:url('images/marble.jpg'); background-repeat:repeat; box-sizing:border-box;"> <div style="position: absolute; left:50%; bottom:-1px; transform:translateX(-50%); border-radius:0px; border-top: 3px solid black; border-left: 3px solid black; border-right: 3px solid black; border-radius:3px; background-image:url('images/marble.jpg'); background-repeat:repeat; padding: 2em; padding-top: 0.2em; padding-bottom: 0.2em; line-height:1em; "> <span id="wait">➤</span> </div> </div> <div class="forward" id="text" style="position:absolute; top: calc(5vh + 5px); bottom: calc(5vh + 5px); left: 0; width:100%; line-height:1.2em; padding-left:5vw; padding-right:5vw; box-sizing:border-box; overflow:auto; width:100%;"> <span> <<type 30ms>> _contents <</type>> </span> <<link "">> <<replace "#text">> <span> _contents </span> <<link "">> <<set $count++>> <<goto play>> <</link>> <</replace>> <<replace "#wait">> ➤ <<link "">> <<set $count++>> <<goto "play">> <</link>> <</replace>> <</link>> </div> </div>
<div class="box" overflow:visible;> <div style="position: absolute; top:0%; bottom:0%; opacity:0.7; left:0%; height:100%; width:100%; background-image:url('images/thugbox2.png'); background-size:100% 100%; background-align:center; background-repeat:no-repeat; background-attatchment:fixed;-webkit-filter: drop-shadow(3px 3px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white); ; filter: drop-shadow(3px 3px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white);"> <div style="position:absolute; top:-3.5vh; height:5vh; left:50%; transform:translate(-50%); height:auto; width:auto; line-height:1em; font-size:5vh; text-align:center; background-image:url('images/thugspot.png'); background-size:100% 100%; background-align:center; background-repeat:no-repeat; background-attatchment:fixed; padding: 6vh; padding-top: 3vh; padding-bottom:3vh;"> <span>_args[0]</span> </div> </div> <div style="position: absolute; top:0%; bottom:0%; left:0%; height:100%; width:100%; background-image:url('images/thugbox.png');background-size:100% 100%; background-align:center; background-repeat:no-repeat; background-attatchment:fixed;"> </div> <div class="forward" id="text" style="position:absolute; top: calc(7vh + 5px); bottom: calc(6vh + 5px); left: 0; width:100%; line-height:1.2em; padding-left:5vw; padding-right:5vw; box-sizing:border-box; overflow:auto; width:100%;"> <span> <<type 30ms>> _contents <</type>> </span> <<link "">> <<replace "#text">> <span> _contents </span> <<link "">> <<set $count++>> <<goto play>> <</link>> <</replace>> <<replace "#wait">> ➤ <<link "">> <<set $count++>> <<goto "play">> <</link>> <</replace>> <</link>> </div> <div style="position:absolute; top:2.5vh; height:3vh; left: 10%; width:10%; line-height:1em; font-size:3vh; text-align:center; opacity:0.5;"> <span>Menu</span> <<link "">> <<script>>UI.restart()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <div style="position:absolute; top:2.5vh; height:3vh; left: 30%; width:10%; line-height:1em; font-size:3vh; text-align:center; opacity:0.5;"> <span>Save</span> <<link "">> <<script>>UI.saves()<</script>> <<set setup.skip to false>> <<set setup.auto to false>> <</link>> </div> <div style="position:absolute; top:2.5vh; height:2vh; right: 30%; width:10%; line-height:1em; font-size:3vh; text-align:center; opacity:0.5;"> <span>Skip</span> <<skip>> </div> <div style="position:absolute; top:2.5vh; height:3vh; right: 10%; width:10%; line-height:1em; font-size:3vh; text-align:center; opacity:0.5;"> <<auto>> </div> <div style="position:absolute; top:-3.5vh; height:5vh; left:50%; transform:translate(-50%); height:auto; width:auto; line-height:1em; font-size:5vh; text-align:center; background-image:url('images/thugspot.png'); background-size:100% 100%; background-align:center; background-repeat:no-repeat; background-attatchment:fixed; padding: 6vh; padding-top: 3vh; padding-bottom:3vh; webkit-filter: drop-shadow(1px 1px 0 rgba(255,255,255,0.2)) drop-shadow(1px -1px 0 rgba(255,255,255,0.2)) drop-shadow(-1px 1px 0 rgba(255,255,255,0.2)); ; filter: drop-shadow(1px 1px 0 rgba(255,255,255,0.2)) drop-shadow(1px -1px 0 rgba(255,255,255,0.2)) drop-shadow(-1px 1px 0 rgba(255,255,255,0.2));"> <span>_args[0]</span> </div> <div style="position:absolute; bottom:2vh; height:3vh; left: 50%; transform:translateX(-50%); width:auto; line-height:1em; font-size:3vh;"> <div style="float:left; margin-top: calc(1.5vh - 1px); width: 10vw; height:2px; background:white;opacity:0.5;"> </div> <div style="float:left;padding-left:5px; padding-right:5px; margin-top:0.1vh;"> <span id="wait">⧖</span> </div> <div style="float:left; margin-top: calc(1.5vh - 1px); width: 10vw; height:2px; background:white;opacity:0.5;"> </div> </div> </div>
<div id="crowd" class="crowd" style="animation-name:crowdslide2; animation-delay:0.5s; transform:translateX(100%); position:absolute; top:0; left:0; height:100%; width:100%;"> <div style="right:15%; bottom:2%; height: 70%;"> <img src="images/characters/npc/fem1.png"> </div> <div style="right:5%; bottom:2%; height: 70%;"> <img src="images/characters/npc/male1.png"> </div> <div style="right:35%; bottom:2%; height: 70%;"> <img src="images/characters/npc/fem3.png"> </div> <div style="right:25%; bottom:2%; height: 70%;"> <img src="images/characters/npc/male2.png"> </div> <div style="right:45%; bottom:2%; height: 70%;"> <img src="images/characters/npc/fem5.png"> </div> <div class="cheer" style="right:0%; animation-delay: 0.1s;"> <img src="images/characters/npc/fem5.png"> </div> <div class="cheer" style="right:40%; animation-delay: 0.2s;"> <img src="images/characters/npc/fem2.png" style="transform:scaleX(-1);"> </div> <div class="cheer" style="right:30%;"> <img src="images/characters/npc/fem3.png" style="transform:scaleX(-1);"> </div> <div class="cheer" style="right:60%; animation-delay: 0.1s;"> <img src="images/characters/npc/fem4.png" style="transform:scaleX(-1);"> </div> <div class="cheer" style="right:50%;"> <img src="images/characters/npc/thug2.png" style="transform:scaleX(-1);"> </div> </div> <div class="crowd" style="position:absolute; top:0; left:0; height:100%; width:100%;"> <div style="left:15%; bottom:5%; height: 70%;"> <img src="images/characters/npc/fem1.png"> </div> <div style="left:5%; bottom:5%; height: 70%;"> <img src="images/characters/npc/male1.png"> </div> <div style="left:35%; bottom:5%; height: 70%;"> <img src="images/characters/npc/fem3.png"> </div> <div style="left:25%; bottom:5%; height: 70%;"> <img src="images/characters/npc/male2.png"> </div> <div style="left:45%; bottom:5%; height: 70%;"> <img src="images/characters/npc/fem5.png"> </div> <div class="cheer" style="left:0%"> <img src="images/characters/npc/male3.png"> </div> <div class="cheer" style="left:40%;"> <img src="images/characters/npc/fem2.png"> </div> <div class="cheer" style="left:50%; animation-delay: 0.1s;"> <img src="images/characters/npc/male3.png"> </div> <div class="cheer" style="left:20%; animation-delay: 0.1s;"> <img src="images/characters/npc/fem4.png"> </div> <div class="cheer" style="left:30%; animation-delay: 0.2s;"> <img src="images/characters/npc/fem3.png"> </div> <div class="cheer" style="left:10%; animation-delay: 0.2s;"> <img src="images/characters/npc/male2.png"> </div> </div>
<<replace "#back">> <<if $count lt 39>> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<else>> <div class="alley blur" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <div class="alley drunk" style="position:fixed; left:0; bottom:0; width:100%; height:100%;"> </div> <</if>> <</replace>> <<if not document.getElementById("crowd")>> <div class="sprite2" style="opacity:0; left:50%;"> <<punch>> <<punch2>> <<punch-miss>> <<punch2-miss>> <<punch3>> <<kick>> </div> <div class="sprite2" style="opacity:0; left:50%;"> <img src="images/characters/rora/scared.png"> </div> <</if>> <<if $count eq 0>> <<replace "#effect">> <</replace>> <<elseif $count eq 1>> <<replace "#effect">> <<include "alleycrowd">> <</replace>> <<elseif $count lt 39 and not document.getElementById("crowd")>> <<replace "#effect">> <<include "alleycrowd3">> <</replace>> <<elseif $count eq 39>> <<replace "#effect">> <<include "alleycrowd2">> <div class="blackout"> </div> <</replace>> <<elseif not document.getElementById("crowd")>> <<replace "#effect">> <<include "alleycrowd2">> <div class="blackout"> </div> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="fadeout" style="position:fixed; top:0;left:0;right:0;bottom:0; background:black; animation-delay:1s; animation-duration:1s;"></div> </div> <<timed 1s>> <<char>>Screams and shouts echo through the narrow alley. The stench of rotting garbage hangs in the air, mixed in with the scent of sweat and blood.<</char>> <</timed>> <<case 1>> <<char>>There is not much space here to begin with, but it's even worse with the crowd of people, all of them shoving and pushing to get as close to the center as possible.<</char>> <<case 2>> <div class="sprite fadein" style="left:50%; transform:translateX(-20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> <div class="sprite fadein" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <<char>>But Rora doesn't have the time to focus on them. The large thug in front of her demands all her attention.<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="slideR" style="animation-delay:200ms;"> <div class="slideL" style="animation-delay:1000ms;"> <div class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(-40%);"> <<punch-miss>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(-30%);"> <<punch2-miss>> </div> <</timed>> <<timed 1000ms>> <<char>>He raises his right for a powerful downward swing, and she leans to the side just in time, feeling a knuckle graze her cheeks.<</char>> <</timed>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <<char "rora">>Come on, big guy! Don't tell me you're getting tired already. Want me to tug you in and sing you a lullaby?<</char>> <<case 5>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <<char "Thug">>Shut your trap, or I'll shut it for you!<</char>> <<case 6>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <<char>>He rushes at her again. She can see his attack coming from a mile away, but there is just not enough space left for her to avoid it anymore.<</char>> <<case 7>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="jump" style="animation-delay:400ms;"> <div class="jump" style="animation-delay:400ms;"> <div class="jump" style="animation-delay:1000ms;"> <div class="jump" style="animation-delay:1000ms;"> <div id="rora" class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> </div> </div> </div> </div> <<timed 400ms>> <<replace "#rora">> <img src="images/characters/rora/scared.png"> <div class="damage"> <img src="images/characters/rora/scared.png"> </div> <</replace>> <</timed>> <<timed 1500ms>> <<replace "#rora">> <img src="images/characters/rora/angry.png"> <div class="damage" style="animation-duration:500ms;"> <img src="images/characters/rora/angry.png"> </div> <</replace>> <</timed>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(-40%);"> <<punch>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(-30%);"> <<punch2>> </div> <</timed>> <<timed 1000ms>> <<char>>She has barely enough time to rip her arms in front of her face. The force of the impact flings her body to the side, but she manages to remain standing. <</char>> <</timed>> <<case 8>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <<char "Thug">>Not so tough now, are you, bitch?<</char>> <<case 9>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <<char "rora">>Hah! Was that all you got? I know ten-year-olds that can hit harder.<</char>> <<case 10>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <<char "Thug">>Wha- YOU LITTLE!<</char>> <<case 11>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="slideR" style="animation-delay:200ms;"> <div class="slideL" style="animation-delay:1000ms;"> <div class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(-40%);"> <<punch-miss>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(-30%);"> <<punch2-miss>> </div> <</timed>> <<timed 1000ms>> <<char>>Rage flickers over the street thugs face, and he lunges at her, his entire weight behind each punch.<</char>> <</timed>> <<case 12>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="jump" style="animation-delay:400ms;"> <div class="jump" style="animation-delay:400ms;"> <div class="jump" style="animation-delay:1000ms;"> <div class="jump" style="animation-delay:1000ms;"> <div id="rora" class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> </div> </div> </div> </div> <<timed 400ms>> <<replace "#rora">> <img src="images/characters/rora/scared.png"> <div class="damage"> <img src="images/characters/rora/scared.png"> </div> <</replace>> <</timed>> <<timed 1500ms>> <<replace "#rora">> <img src="images/characters/rora/angry.png"> <div class="damage" style="animation-duration:500ms;"> <img src="images/characters/rora/angry.png"> </div> <</replace>> <</timed>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(-40%);"> <<punch>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(-30%);"> <<punch2>> </div> <</timed>> <<timed 1000ms>> <<char>>She tries to slip past him, but his massive frame is just too big. A hurricane of punches connects with her guard until the stinging pain causes her muscles to grow numb.<</char>> <</timed>> <<case 13>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="jump" style="animation-delay:400ms;"> <div class="jump" style="animation-delay:400ms;"> <div class="jump" style="animation-delay:1000ms;"> <div class="jump" style="animation-delay:1000ms;"> <div id="rora" class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> </div> </div> </div> </div> <<timed 400ms>> <<replace "#rora">> <img src="images/characters/rora/scared.png"> <div class="damage"> <img src="images/characters/rora/scared.png"> </div> <</replace>> <</timed>> <<timed 1500ms>> <<replace "#rora">> <img src="images/characters/rora/angry.png"> <div class="damage" style="animation-duration:500ms;"> <img src="images/characters/rora/angry.png"> </div> <</replace>> <</timed>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(-40%);"> <<punch>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(-30%);"> <<punch2>> </div> <</timed>> <<char>>It won't be long now until he breaks through. When he does, she will be done for good.<</char>> <<case 14>> <div class="sprite fadeout" style="left:50%; transform:translateX(-20%);"> <img src="images/characters/rora/angry.png"> </div> <div class="sprite fadeout" style="left:50%; transform:translateX(-80%);"> <img src="images/characters/npc/thug.png"> </div> <div class="sprite fadein" style="left:50%; transform:translateX(-50%);"> <div class="turn" style="animation-delay:1s;"> <div class="turn" style="animation-delay:2.2s;"> <img src="images/characters/boris/shout.png"> </div> </div> </div> <<char "boris">>COME ON! MAKE YOU BETS! WHO'S GOING TO WIN?<</char>> <<case 15>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/boris/neutral.png"> </div> <<char>>Boris stands on top of a makeshift podium, his hands eagerly snatching the money that is thrust towards him by the assembled gamblers and addicts.<</char>> <<case 16>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="shake2"> <img src="images/characters/boris/neutral.png"> </div> </div> <<char>>Rora looks towards him through the gap between her arms. Their eyes meet for a split second, and Boris subtly shakes his head.<</char>> <<case 17>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="turn"> <div class="turn" style="animation-delay:1.2s;"> <img src="images/characters/boris/shout.png"> </div> </div> </div> <<char "boris">>THE CHAMPION IS ON THE ROPES! THE FIGHT MIGHT END ANY SECOND! FIVE TO ONE ODDS! PLACE YOUR BETS WHILE YOU STILL CAN!<</char>> <<case 18>> <div class="sprite fadein" style="left:50%; transform:translateX(-20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> <div class="sprite fadein" style="left:50%; transform:translateX(-80%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <div class="sprite fadeout" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/boris/shout.png"> </div> <<char "Thug">>HEY! THIS IS WHERE THE MUSIC IS, YOU LITTLE SHIT!<</char>> <<case 19>> <<timed 0.2s>> <<replace "#rora">> <img src="images/characters/rora/scared.png"> <</replace>> <</timed>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="slideR" style="animation-duration:0.2s; animation-delay:0.2s"> <div class="slideR" style="animation-duration:0.2s; animation-delay:0.2s"> <div class="jump" style="animation-duration:0.2s; animation-delay:0.2s"> <div class="jump" style="animation-duration:0.2s; animation-delay:0.2s"> <div class="shake" style="animation-delay:0.4s"> <div id="rora"> <img src="images/characters/rora/angry.png"> </div> <div class="damage" style="animation-delay:0.4s"> <img src="images/characters/rora/scared.png"> </div> </div> </div> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="slideR" style="animation-duration:0.1s"> <div class="slideR" style="animation-duration:0.1s"> <img src="images/characters/npc/thug.png"> </div> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(-20%);"> <<kick>> </div> <<timed 500ms>> <<char>>A sudden kick connects to her ribs, catapulting her high into the air. She shouldn't have allowed herself to be distracted like this.<</char>> <</timed>> <<case 20>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="shake"> <img src="images/characters/rora/scared.png"> <div class="damage"> <img src="images/characters/rora/scared.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <img src="images/characters/npc/thug.png"> </div> <<char>>She slams against the alley wall with full force, pain exploding all around her as she bounces off and lands in a heap of rotting trash bags.<</char>> <<case 21>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="shake"> <img src="images/characters/rora/scared.png"> <div class="damage"> <img src="images/characters/rora/scared.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <img src="images/characters/npc/thug.png"> </div> <<char>>There is a second of silence. Then the crowd explodes in ecstatic screams. Some people rush towards Boris, eager to use this last window to make one more bet, but most of them remain glued in place, unwilling to miss even a second of the massacre that is about to occur.<</char>> <<case 22>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="shake"> <img src="images/characters/rora/scared.png"> <div class="damage"> <img src="images/characters/rora/scared.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <img src="images/characters/npc/thug.png"> </div> <<char "Thug">>How was that for a weak punch, bitch?<</char>> <<case 23>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="shake"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <img src="images/characters/npc/thug.png"> </div> <<char "rora">>Krk-…<</char>> <<case 24>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="shake"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <img src="images/characters/npc/thug.png"> </div> <<char>>She wants to spit back a snappy answer, but as soon as she takes a breath a sharp pain rips through her side, and buries itself deep in her intestines.<</char>> <<case 25>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="shake"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <img src="images/characters/npc/thug.png"> </div> <<char "Thug">>Oh - what's that? I couldn't hear you there. Did I break something important in that fucking mouth of yours?<</char>> <<case 26>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="shake"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <img src="images/characters/npc/thug.png"> </div> <<char "rora">>Hnng… <</char>> <<case 27>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="shake"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <div class="sway"> <img src="images/characters/npc/thug.png"> </div> </div> <<char "Thug">>Well get ready for me to break a lot more!<</char>> <<case 28>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <<char>>It's a good thing this idiot loves the sound of his own voice so much. It gives Rora the chance to get back on her shaking legs to block the next wave of punches.<</char>> <<case 29>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="jump" style="animation-delay:400ms;"> <div class="jump" style="animation-delay:400ms;"> <div class="jump" style="animation-delay:1000ms;"> <div class="jump" style="animation-delay:1000ms;"> <div id="rora" class="sway"> <img src="images/characters/rora/angry.png"> </div> </div> </div> </div> </div> </div> <<timed 400ms>> <<replace "#rora">> <img src="images/characters/rora/scared.png"> <div class="damage"> <img src="images/characters/rora/scared.png"> </div> <</replace>> <</timed>> <<timed 1500ms>> <<replace "#rora">> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> <</replace>> <</timed>> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <div class="sprite2" style="left:50%;"> <<punch>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(10%);"> <<punch2>> </div> <</timed>> <<timed 500ms>> <<char>>But each knock slams her back into the wall, and each time it happens the invisible dagger in her side is driven a little deeper.<</char>> <</timed>> <<case 30>> <div class="sprite fadeout" style="left:50%; transform:translateX(20%);"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> <div class="sprite fadeout" style="left:50%; transform:translateX(-40%);"> <img src="images/characters/npc/thug.png"> </div> <div class="sprite fadein" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/boris/neutral.png"> </div> <<char>>Once more she looks over at Boris. Once more he subtly shakes his head. <</char>> <<case 31>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="turn"> <div class="turn" style="animation-delay:1.2s;"> <img src="images/characters/boris/shout.png"> </div> </div> </div> <<char "boris">>AND IT LOOKS LIKE THE FIGHT COULD END ANY MOMENT! PLACE YOUR BETS QUICKLY NOW!<</char>> <<case 32>> <div class="sprite fadein" style="left:50%; transform:translateX(20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> </div> <div class="sprite fadein" style="left:50%; transform:translateX(-40%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <div class="sprite fadeout" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/boris/shout.png"> </div> <<char>>Blood begins to trickle into her fur from her burst lip, and she forces her lips to twist into an agonized smile.<</char>> <<case 33>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <<char "Thug">>What are you grinning about, bitch? Do you really love pain this much? Well lucky you, cause I got a lot more of it in store for you.<</char>> <<case 34>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <<char "rora">>Nah - I was just thinking about the fun I had with your mom last night.<</char>> <<case 35>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <<char "Thug">>YOU FUCKIN-<</char>> <<case 36>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="sway"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <<char>>He winds up, putting his entire strength behind the next attack.<</char>> <<case 37>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="jump" style="animation-delay:400ms;"> <div class="jump" style="animation-delay:400ms;"> <div class="jump" style="animation-delay:1000ms;"> <div class="jump" style="animation-delay:1000ms;"> <div id="rora" class="sway"> <img src="images/characters/rora/angry.png"> <div class="damage"> <img src="images/characters/rora/angry.png"> </div> </div> </div> </div> </div> </div> </div> <<timed 400ms>> <<replace "#rora">> <img src="images/characters/rora/scared.png"> <div class="damage"> <img src="images/characters/rora/scared.png"> </div> <</replace>> <</timed>> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <div class="sprite2" style="left:50%;"> <<punch>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(10%);"> <<punch2>> </div> <</timed>> <<timed 500ms>> <<char>>It breaks through her feeble block, and crashes against the side of her face. Her head snaps to the side.<</char>> <</timed>> <<case 38>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="shake"> <img src="images/characters/rora/scared.png"> <div class="damage"> <img src="images/characters/rora/scared.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <div class="sway" style="animation-delay:0.2s;"> <img src="images/characters/npc/thug.png"> </div> </div> <div class="fadein" style="animation-duration:1s; position:fixed; top:0; bottom:0; left:0; right:0; background:black;"></div> <<char>>Sudden darkness drowns out her vision, as her brain violently jolts inside her skull.<</char>> <<case 39>> <div style="position:fixed; top:0; left:0; right:0; bottom:0; background:black;"></div> <<char>>The crowd goes wild, screaming for more, screaming for blood and gore and broken bones, but even these sounds seem muffled, as if they are being played through a broken radio.<</char>> <<case 40>> <div class="fadeout" style="animation-duration:3s; position:fixed; top:0; left:0; right:0; bottom:0; background:black;"></div> <<char>>Rora manages to open her eyes. The world is nothing but a mess of blurry colors. Some part of her wishes to just close them again and let the darkness take over.<</char>> <<case 41>> <<char>>But she can't let that happen. As shitty as this life of hers is, there are still reasons to get up and fight for.<</char>> <<case 42>> <div style="position:fixed; left:50%; top:50%; transform: translate(-50%, -50%);"> <div class="slideR"> <div class="fadein option" style="transform: translateX(-20%);"> Like all the friends cheering for her right now. <<link "">> <<set $passage to "A1S2P1-O1">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> <div class="slideL"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> Like her family that depends on her. <<link "">> <<set $passage to "A1S2P1-O2">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> <div class="slideR"> <div class="fadein option" style="margin-top:1em; transform: translateX(-20%);"> Like her true love waiting back home. <<link "">> <<set $passage to "A1S2P1-O3">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> </div> <<set setup.skip to false>> <</switch>>
<<widget "punch">> <<set _punch to 1>> <div id="punch"></div> <<timed 0.1s>> <<repeat 60ms>> <<replace "#punch">> <<switch _punch>> <<case 1>> <img src="images/punch/punch1-1.png"> <<case 2>> <img src="images/punch/punch1-2.png"> <<case 3>> <img src="images/punch/punch1-3.png"> <<case 4>> <img src="images/punch/punch1-4.png"> <<case 5>> <img src="images/punch/punch1-5.png"> <<case 6>> <img src="images/punch/punch1-6.png"> <<case 7>> <img class="fadeout" src="images/punch/punch1-7.png" style="animation-delay:700ms;"> <</break>> <</switch>> <</replace>> <<set _punch++>> <</repeat>> <</timed>> <</widget>> <<widget "punch-miss">> <<set _punchM to 1>> <div id="punchM"></div> <<timed 0.1s>> <<repeat 60ms>> <<replace "#punchM">> <<switch _punchM>> <<case 1>> <img src="images/punch/punch1-1.png"> <<case 2>> <img src="images/punch/punch1-2.png"> <<case 3>> <img src="images/punch/punch1-3.png"> <<case 4>> <img src="images/punch/punch-miss1-4.png"> <<case 5>> <img class="fadeout" src="images/punch/punch-miss1-5.png" style="animation-delay:700ms;"> <</break>> <</switch>> <</replace>> <<set _punchM++>> <</repeat>> <</timed>> <</widget>> <<widget "punch2">> <<set _punch2 to 1>> <div id="punch2"></div> <<timed 0.1s>> <<repeat 60ms>> <<replace "#punch2">> <<switch _punch2>> <<case 1>> <img src="images/punch/punch2-1.png"> <<case 2>> <img src="images/punch/punch2-2.png"> <<case 3>> <img src="images/punch/punch2-3.png"> <<case 4>> <img src="images/punch/punch2-4.png"> <<case 5>> <img src="images/punch/punch2-5.png"> <<case 6>> <img src="images/punch/punch2-6.png"> <<case 7>> <img class="fadeout" src="images/punch/punch2-7.png" style="animation-delay:700ms;"> <</break>> <</switch>> <</replace>> <<set _punch2++>> <</repeat>> <</timed>> <</widget>> <<widget "punch2-miss">> <<set _punch2M to 1>> <div id="punch2M"></div> <<timed 0.1s>> <<repeat 60ms>> <<replace "#punch2M">> <<switch _punch2M>> <<case 1>> <img src="images/punch/punch2-1.png"> <<case 2>> <img src="images/punch/punch2-2.png"> <<case 3>> <img src="images/punch/punch2-3.png"> <<case 4>> <img src="images/punch/punch-miss2-4.png"> <<case 5>> <img class="fadeout" src="images/punch/punch-miss2-5.png" style="animation-delay:700ms;"> <</break>> <</switch>> <</replace>> <<set _punch2M++>> <</repeat>> <</timed>> <</widget>> <<widget "punch3">> <<set _punch3 to 1>> <div id="punch3"></div> <<timed 0.1s>> <<repeat 50ms>> <<replace "#punch3">> <<switch _punch3>> <<case 1>> <img src="images/punch/punch3-1.png"> <<case 2>> <img src="images/punch/punch3-2.png"> <<case 3>> <img src="images/punch/punch3-3.png"> <<case 4>> <img src="images/punch/punch3-4.png"> <<case 5>> <img src="images/punch/punch3-5.png"> <<case 6>> <img src="images/punch/punch3-6.png"> <<case 7>> <img src="images/punch/punch3-7.png"> <<case 8>> <img class="fadeout" src="images/punch/punch3-8.png" style="animation-delay:700ms;"> <</break>> <</switch>> <</replace>> <<set _punch3++>> <</repeat>> <</timed>> <</widget>> <<widget "kick">> <<set _kick to 1>> <div id="kick"></div> <<timed 0.1s>> <<repeat 60ms>> <<replace "#kick">> <<switch _kick>> <<case 1>> <img src="images/punch/kick1.png"> <<case 2>> <img src="images/punch/kick2.png"> <<case 3>> <img src="images/punch/kick3.png"> <<case 4>> <img src="images/punch/kick4.png"> <<case 5>> <img class="fadeout" src="images/punch/kick5.png" style="animation-delay:700ms;"> <</break>> <</switch>> <</replace>> <<set _kick++>> <</repeat>> <</timed>> <</widget>>
<script> const images = [new Image(), new Image()] for (const image of images) { image.src = "images/characters/opaline/sad.png" image.src = "images/characters/opaline/sad1.png" image.src = "images/characters/opaline/sad2.png" image.src = "images/characters/opaline/sad3.png" image.src = "images/characters/opaline/neutral.png" image.src = "images/characters/opaline/angry.png" image.src = "images/characters/opaline/blush.png" image.src = "images/characters/opaline/happy.png" image.src = "images/characters/opaline/scared1.png" image.src = "images/characters/opaline/scared.png" image.src = "images/characters/ingot/neutral.png" image.src = "images/characters/boris/neutral.png" image.src = "images/characters/boris/shout.png" image.src = "images/characters/boris/smile.png" image.src = "images/characters/boris/hurt.png" image.src = "images/characters/boris/chill.png" image.src = "images/characters/boris/angry.png" image.src = "images/characters/rora/neutral.png" image.src = "images/characters/rora/angry.png" image.src = "images/characters/rora/scared.png" image.src = "images/characters/rora/blush.png" image.src = "images/characters/rora/disappointed.png" image.src = "images/characters/rora/happy.png" image.src = "images/characters/rora/peeved.png" image.src = "images/characters/rora/peeved1.png" image.src = "images/characters/rora/sad.png" image.src = "images/punch/punch1-1.png" image.src = "images/punch/punch1-2.png" image.src = "images/punch/punch1-3.png" image.src = "images/punch/punch1-4.png" image.src = "images/punch/punch1-5.png" image.src = "images/punch/punch1-6.png" image.src = "images/punch/punch1-7.png" image.src = "images/punch/punch2-1.png" image.src = "images/punch/punch2-2.png" image.src = "images/punch/punch2-3.png" image.src = "images/punch/punch2-4.png" image.src = "images/punch/punch2-5.png" image.src = "images/punch/punch2-6.png" image.src = "images/punch/punch2-7.png" image.src = "images/punch/punch-miss1-4.png" image.src = "images/punch/punch-miss1-5.png" image.src = "images/punch/punch-miss2-4.png" image.src = "images/punch/punch-miss2-5.png" image.src = "images/borisbox2.png" image.src = "images/borisbox.png" image.src = "images/thugspot.png" image.src = "images/thugbox.png" image.src = "images/thugbox2.png" image.src = "images/spot1.png" image.src = "images/spot2.png" image.src = "images/spot3.png" image.src = "images/spot4.png" image.src = "images/rorabrush.png" image.src = "images/mansion.png" image.src = "images/alley.jpg" image.src = "images/plaza.png" image.src = "images/slum.png" image.src = "images/slum2.png" } function imageIsLoaded(image) { return new Promise(resolve => { image.onload = () => resolve() image.onerror = () => resolve() }) } Promise.all(images.map(imageIsLoaded)).then(() => { new Wikifier(null, '<<loading>>') }) </script> <<replace #txt>> <div style="visibility:hidden;"> <<include "rora">> <<include "boris">> <<include "opaline">> <<include "upper">> <<include "lower">> <<include "ingot">> <div class="sprite2" style="left:50%; transform:translateX(-40%);"> <<punch-miss>> </div> <div class="sprite2" style="left:50%; transform:translateX(-30%);"> <<punch2-miss>> </div> <div class="sprite2" style="left:50%; transform:translateX(-40%);"> <<punch>> </div> <div class="sprite2" style="left:50%; transform:translateX(-30%);"> <<punch2>> </div> <div class="sprite2" style="left:50%; transform:translateX(-20%);"> <<kick>> </div> <div class="sprite2" style="left:50%; transform:translateX(-30%);"> <<punch3>> </div> <div class="sprite"> <img src="images/characters/rora/angry.png"> </div> <div class="sprite"> <img src="images/characters/rora/disappointed.png"> </div> <div class="sprite"> <img src="images/characters/rora/blush.png"> </div> <div class="sprite"> <img src="images/characters/rora/happy.png"> </div> <div class="sprite"> <img src="images/characters/rora/neutral.png"> </div> <div class="sprite"> <img src="images/characters/rora/peeved.png"> </div> <div class="sprite"> <img src="images/characters/rora/peeved1.png"> </div> <div class="sprite"> <img src="images/characters/rora/sad.png"> </div> <div class="sprite"> <img src="images/characters/rora/scared.png"> </div> <div class="sprite"> <img src="images/characters/opaline/scared.png"> </div> <div class="sprite"> <img src="images/characters/opaline/scared1.png"> </div> <div class="sprite"> <img src="images/characters/opaline/angry.png"> </div> <div class="sprite"> <img src="images/characters/opaline/blush.png"> </div> <div class="sprite"> <img src="images/characters/opaline/happy.png"> </div> <div class="sprite"> <img src="images/characters/opaline/neutral.png"> </div> <div class="sprite"> <img src="images/characters/opaline/sad.png"> </div> <div class="sprite"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite"> <img src="images/characters/opaline/sad3.png"> </div> <div class="sprite"> <img src="images/characters/ingot/neutral.png"> </div> <div class="sprite"> <img src="images/characters/ingot/irritated.png"> </div> <div class="sprite"> <img src="images/characters/ingot/smug.png"> </div> <div class="sprite"> <img src="images/characters/ingot/maniacal.png"> </div> <div class="sprite"> <img src="images/characters/ingot/angry.png"> </div> <div class="sprite"> <img src="images/characters/boris/neutral.png"> </div> <div class="sprite"> <img src="images/characters/boris/angry.png"> </div> <div class="sprite"> <img src="images/characters/boris/chill.png"> </div> <div class="sprite"> <img src="images/characters/boris/hurt.png"> </div> <div class="sprite"> <img src="images/characters/boris/shout.png"> </div> <div class="sprite"> <img src="images/characters/boris/smile.png"> </div> <img src="images/characters/boris/smile.png"> </div> <</replace>>
<div style="pointer-events:auto;"><<button "Saves">><<script>>UI.saves()<</script>><</button>></div>
<div id="crowd" class="crowd" style="animation-name:none; position:absolute; top:0; left:0; height:100%; width:100%;"> <div id="ko" style="right:15%; bottom:2%; height: 70%;"> <img class="blur" src="images/characters/npc/fem1.png"> <img class="drunk" src="images/characters/npc/fem1.png"> </div> <div style="right:5%; bottom:2%; height: 70%;"> <img class="blur" src="images/characters/npc/male1.png"> <img class="drunk" src="images/characters/npc/male1.png"> </div> <div style="right:35%; bottom:2%; height: 70%;"> <img class="blur" src="images/characters/npc/fem3.png"> <img class="drunk" src="images/characters/npc/fem3.png"> </div> <div style="right:25%; bottom:2%; height: 70%;"> <img class="blur" src="images/characters/npc/male2.png"> <img class="drunk" src="images/characters/npc/male2.png"> </div> <div style="right:45%; bottom:2%; height: 70%;"> <img class="blur" src="images/characters/npc/fem5.png"> <img class="drunk" src="images/characters/npc/fem5.png"> </div> <div class="cheer" style="right:0%; animation-delay: 0.1s;"> <img class="blur" src="images/characters/npc/fem5.png"> <img class="drunk" src="images/characters/npc/fem5.png"> </div> <div class="cheer" style="right:40%; animation-delay: 0.2s; transform:scaleX(-1);"> <img class="blur" src="images/characters/npc/fem2.png"> <img class="drunk" src="images/characters/npc/fem2.png"> </div> <div class="cheer" style="right:30%; transform:scaleX(-1) transform:scaleX(-1);;"> <img class="blur" src="images/characters/npc/fem3.png"> <img class="drunk" src="images/characters/npc/fem3.png"> </div> <div class="cheer" style="right:60%; animation-delay: 0.1s; transform:scaleX(-1);"> <img class="blur" src="images/characters/npc/fem4.png"> <img class="drunk" src="images/characters/npc/fem4.png"> </div> <div class="cheer" style="right:50%; transform:scaleX(-1);"> <img class="blur" src="images/characters/npc/thug2.png"> <img class="drunk" src="images/characters/npc/thug2.png"> </div> </div> <div id="crowd" class="crowd" style="animation-name:none; position:absolute; top:0; left:0; height:100%; width:100%;"> <div style="left:15%; bottom:5%; height: 70%;"> <img class="blur" src="images/characters/npc/fem1.png"> <img class="drunk" src="images/characters/npc/fem1.png"> </div> <div style="left:5%; bottom:5%; height: 70%;"> <img class="blur" src="images/characters/npc/male1.png"> <img class="drunk" src="images/characters/npc/male1.png"> </div> <div style="left:35%; bottom:5%; height: 70%;"> <img class="blur" src="images/characters/npc/fem3.png"> <img class="drunk" src="images/characters/npc/fem3.png"> </div> <div style="left:25%; bottom:5%; height: 70%;"> <img class="blur" src="images/characters/npc/male2.png"> <img class="drunk" src="images/characters/npc/male2.png"> </div> <div style="left:45%; bottom:5%; height: 70%;"> <img class="blur" src="images/characters/npc/fem5.png"> <img class="drunk" src="images/characters/npc/fem5.png"> </div> <div class="cheer" style="left:0%"> <img class="blur" src="images/characters/npc/male3.png"> <img class="drunk" src="images/characters/npc/male3.png"> </div> <div class="cheer" style="left:40%;"> <img class="blur" src="images/characters/npc/fem2.png"> <img class="drunk" src="images/characters/npc/fem2.png"> </div> <div class="cheer" style="left:50%; animation-delay: 0.1s;"> <img class="blur" src="images/characters/npc/male3.png"> <img class="drunk" src="images/characters/npc/male3.png"> </div> <div class="cheer" style="left:20%; animation-delay: 0.1s;"> <img class="blur" src="images/characters/npc/fem4.png"> <img class="drunk" src="images/characters/npc/fem4.png"> </div> <div class="cheer" style="left:30%; animation-delay: 0.2s;"> <img class="blur" src="images/characters/npc/fem3.png"> <img class="drunk" src="images/characters/npc/fem3.png"> </div> <div class="cheer" style="left:10%; animation-delay: 0.2s;"> <img class="blur" src="images/characters/npc/male2.png"> <img class="drunk" src="images/characters/npc/male2.png"> </div> </div>
<div id="crowd" class="crowd" style="animation-name:none; position:absolute; top:0; left:0; height:100%; width:100%;"> <div style="right:15%; bottom:2%; height: 70%;"> <img src="images/characters/npc/fem1.png"> </div> <div style="right:5%; bottom:2%; height: 70%;"> <img src="images/characters/npc/male1.png"> </div> <div style="right:35%; bottom:2%; height: 70%;"> <img src="images/characters/npc/fem3.png"> </div> <div style="right:25%; bottom:2%; height: 70%;"> <img src="images/characters/npc/male2.png"> </div> <div style="right:45%; bottom:2%; height: 70%;"> <img src="images/characters/npc/fem5.png"> </div> <div class="cheer" style="right:0%; animation-delay: 0.1s;"> <img src="images/characters/npc/fem5.png"> </div> <div class="cheer" style="right:40%; animation-delay: 0.2s;"> <img src="images/characters/npc/fem2.png" style="transform:scaleX(-1);"> </div> <div class="cheer" style="right:30%;"> <img src="images/characters/npc/fem3.png" style="transform:scaleX(-1);"> </div> <div class="cheer" style="right:60%; animation-delay: 0.1s;"> <img src="images/characters/npc/fem4.png" style="transform:scaleX(-1);"> </div> <div class="cheer" style="right:50%;"> <img src="images/characters/npc/thug2.png" style="transform:scaleX(-1);"> </div> </div> <div class="crowd" style="animation-name:none; position:absolute; top:0; left:0; height:100%; width:100%;"> <div style="left:15%; bottom:5%; height: 70%;"> <img src="images/characters/npc/fem1.png"> </div> <div style="left:5%; bottom:5%; height: 70%;"> <img src="images/characters/npc/male1.png"> </div> <div style="left:35%; bottom:5%; height: 70%;"> <img src="images/characters/npc/fem3.png"> </div> <div style="left:25%; bottom:5%; height: 70%;"> <img src="images/characters/npc/male2.png"> </div> <div style="left:45%; bottom:5%; height: 70%;"> <img src="images/characters/npc/fem5.png"> </div> <div class="cheer" style="left:0%"> <img src="images/characters/npc/male3.png"> </div> <div class="cheer" style="left:40%;"> <img src="images/characters/npc/fem2.png"> </div> <div class="cheer" style="left:50%; animation-delay: 0.1s;"> <img src="images/characters/npc/male3.png"> </div> <div class="cheer" style="left:20%; animation-delay: 0.1s;"> <img src="images/characters/npc/fem4.png"> </div> <div class="cheer" style="left:30%; animation-delay: 0.2s;"> <img src="images/characters/npc/fem3.png"> </div> <div class="cheer" style="left:10%; animation-delay: 0.2s;"> <img src="images/characters/npc/male2.png"> </div> </div>
<<replace "#back">> <div class="alley blur" style="position:fixed; left:0; bottom:0; width:100%; height:100%"></div> <div class="alley drunk" style="position:fixed; left:0; bottom:0; width:100%; height:100%;"></div> <</replace>> <<if not document.getElementById("crowd")>> <<replace "#effect">> <<include "alleycrowd2">> <div class="blackout"> </div> <</replace>> <</if>> <<switch $count>> <<case 0>> <<char>>Right... There's all of her friend cheering for her...<</char>> <<case 1>> <<char>>Except that their cheers sound a lot like 'Crush her!' 'End her!' 'Kill her!'<</char>> <<case 2>> <<char>>That's probably because nobody in the audience is actually her friend. They came to see blood and hear the sound of bones breaking, and they don't really care who all that blood and those bones belong to.<</char>> <<case 3>> <<char>>Nobody here is really her friend. Because Rora doesn't have any real friends. She doesn't need any friends. Friends just hurt you in the end.<</char>> <<set $passage to "A1S2P2">> <<set $count to -1>> <</switch>>
<<replace "#back">> <div class="alley blur" style="position:fixed; left:0; bottom:0; width:100%; height:100%"></div> <div class="alley drunk" style="position:fixed; left:0; bottom:0; width:100%; height:100%;"></div> <</replace>> <<if not document.getElementById("crowd")>> <<replace "#effect">> <<include "alleycrowd2">> <div class="blackout"> </div> <</replace>> <</if>> <<switch $count>> <<case 0>> <<char>>Right - this isn't just about her. She needs to think about her family as well.<</char>> <<case 1>> <<char>>A family that consists of her... and nobody else. Not since her mother took her to that lone landfill far from home, and just left.<</char>> <<case 2>> <<char>>Rora was ten at the time, but it was okay. Turns out she didn't need a mother, or a family.<</char>> <<case 3>> <<char>>She doesn't really need anybody when it comes down to it. It's better this way. Other people just let you down.<</char>> <<set $passage to "A1S2P2">> <<set $count to -1>> <</switch>>
<<replace "#back">> <div class="alley blur" style="position:fixed; left:0; bottom:0; width:100%; height:100%"></div> <div class="alley drunk" style="position:fixed; left:0; bottom:0; width:100%; height:100%;"></div> <</replace>> <<if not document.getElementById("crowd")>> <<replace "#effect">> <<include "alleycrowd2">> <div class="blackout"> </div> <</replace>> <</if>> <<switch $count>> <<case 0>> <<char>>Right - her true love back at home...<</char>> <<case 1>> <<char>>Which would probably be the moldy mattress she uses as bed. It should have soaked up enough blood and sweat to count as living creature by now.<</char>> <<case 2>> <<char>>There's certainly nothing else alive in that cramped little room. Even the cockroaches have stopped coming around ever she switched her diet to protein powder and nutrient drinks.<</char>> <<case 3>> <<char>>It's better like this. Better to stay alone. Other people just get in the way. Why go through all the trouble when they just leave eventually anyway.<</char>> <<set $passage to "A1S2P2">> <<set $count to -1>> <</switch>>
<<if $count gt 25 and $count lt 30>> <<replace "#effect">> <div class="blackout"> </div> <</replace>> <<elseif $count eq 30>> <<replace "#effect">> <div class="fadeout"> <div class="blackout"> </div> </div> <</replace>> <<elseif $count gt 30>> <<replace "#effect">> <</replace>> <<elseif $count eq 5>> <<replace "#effect">> <<include "alleycrowd3">> <</replace>> <<elseif not document.getElementById("crowd")>> <<replace "#effect">> <<if $count lt 5>> <<include "alleycrowd2">> <div class="blackout"> </div> <<else>> <<include "alleycrowd3">> <</if>> <</replace>> <</if>> <<if $count lt 5 and not document.getElementById("ko")>> <<include "alleycrowd2">> <div class="blackout"> </div> <</if>> <<if $count lt 5 or ($count gt 23 and $count lt 30)>> <<replace "#back">> <div class="alley blur" style="position:fixed; left:0; bottom:0; width:100%; height:100%"></div> <div class="alley drunk" style="position:fixed; left:0; bottom:0; width:100%; height:100%;"></div> <<if not document.getElementById("crowd")>> <div class="sprite2" style="opacity:0; left:50%;"> <<punch>> <<punch2>> <<punch-miss>> <<punch2-miss>> <<punch3>> <<kick>> </div> <div class="sprite2" style="opacity:0; left:50%;"> <img src="images/characters/rora/scared.png"> </div> <</if>> <</replace>> <<elseif $count eq 30>> <<replace "#back">> <div class="alley sober" style="position:fixed; left:0; bottom:0; width:100%; height:100%"></div> <</replace>> <<else>> <<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"></div> <</replace>> <</if>> <<switch $count>> <<case 0>> <<char>>So maybe there's not so much reason to fight against the hovering darkness after all - no friends, no family, no partner....<</char>> <<case 1>> <<char>>And yet she remains standing. Because fighting is the only thing she's good for.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="blur"> <img src="images/characters/boris/shout.png"> </div> <div class="drunk"> <img src="images/characters/boris/shout.png"> </div> </div> <<char "boris">>WHAT A DEADLY ATTACK! THIS MIGHT BE THE END! FIFTEEN TO ONE ODDS FOR THE CHALLENGER! LAST CHANCE TO BET - LAST CHANCE!<</char>> <<case 3>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="blur"> <img src="images/characters/boris/neutral.png"> </div> <div class="drunk"> <img src="images/characters/boris/neutral.png"> </div> </div> <<char>>Through all the blurry confusion she can still make out Boris standing amidst the spectators. His big hand reach out left and right, eagerly accepting the wads of cash thrust towards him.<</char>> <<case 4>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="blur"> <img src="images/characters/boris/neutral.png"> </div> <div class="drunk"> <img src="images/characters/boris/neutral.png"> </div> </div> <<char>>Rora taps into the last reserves of strength still remaining within her.<</char>> <<case 5>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/boris/neutral.png"> </div> <<char>>Reality snaps back into place. Her eyes meet those of Boris for the third time.<</char>> <<case 6>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/boris/neutral.png"> </div> <<char>>This time he nods.<</char>> <<case 7>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img class="fadeout" src="images/characters/boris/neutral.png"> </div> <div class="sprite fadein" style="left:50%; transform:translateX(20%);"> <div class="shake"> <img src="images/characters/rora/scared.png"> <div class="damage"> <img src="images/characters/rora/scared.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <div class="sway" style="animation-delay:0.2s;"> <img class="fadein" src="images/characters/npc/thug.png"> </div> </div> <<char "Thug">>Well then. Time to say goodbye, bitch!<</char>> <<case 8>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="turn"> <img src="images/characters/rora/angry.png"> </div> </div> </div> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <div class="slideR" style="animation-duration:0.5s;"> <img src="images/characters/npc/thug.png"> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(20%)"> <<punch-miss>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(30%);"> <<punch2-miss>> </div> <</timed>> <<timed 500ms>> <<char "Thug">>What the - ?!<</char>> <</timed>> <<case 9>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <img src="images/characters/rora/angry.png" style="transform: scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="turn"> <img src="images/characters/npc/thug.png"> </div> </div> <<char "Thug">>Oh, there you are. Slippery little shit, aren't you? But you can't run forever!<</char>> <<case 10>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="slideR" style="animation-duration:0.5s;"> <div class="slideR" style="animation-duration:0.5s;"> <div class="slideR" style="animation-duration:0.5s;"> <div class="slideR" style="animation-duration:0.5s;"> <div class="slideR" style="animation-duration:0.5s;"> <div class="turn"> <img src="images/characters/rora/angry.png" style="transform: scaleX(-1);"> </div> </div> </div> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="slideL"> <div class="slideL"> <div class="turn" style="animation-delay:1s;"> <img src="images/characters/npc/thug.png" style="transform: scaleX(-1);"> </div> </div> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(-100%) scaleX(-1);"> <<punch-miss>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(-110%) scaleX(-1);"> <<punch2-miss>> </div> <</timed>> <<timed 750ms>> <<char "Thug">>STOP RUNNING AND FIGHT!<</char>> <</timed>> <<case 11>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="turn"> <img src="images/characters/rora/angry.png"> </div> </div> </div> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-60%);"> <div class="slideR"> <div class="slideR"> <div class="jump" style="animation-delay:0.25s;"> <div class="jump" style="animation-delay:0.25s;"> <div class="turn" style="animation-delay:1s;"> <img src="images/characters/npc/thug.png"> <<timed 0.25s>> <div class="damage"> <img src="images/characters/npc/thug.png"> </div> <</timed>> </div> </div> </div> </div> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(20%)"> <<punch-miss>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(30%);"> <<punch2-miss>> </div> <</timed>> <div class="sprite2" style="left:50%; transform:translateX(-20%) scaleX(-1);"> <div class="slideR"> <div class="slideR"> <<kick>> </div> </div> </div> <<timed 750ms>> <<char>>He gurgles in surprise as the jab lands just above his gut. It's the first time any of her attacks connected. For a heartbeat his relentless assault falters, then he lunges at her with renewed rage. <</char>> <</timed>> <<case 12>> <div class="sprite" style="left:50%; transform:translateX(-60%);"> <div class="slideR" style="animation-duration:0.5s;"> <div class="slideR" style="animation-duration:0.5s;"> <div class="turn"> <img src="images/characters/rora/angry.png" style="transform:scaleX(-1);"> </div> </div> </div> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="slideL"> <div class="slideL"> <div class="slideL"> <div class="jump" style="animation-delay:0.25s;"> <div class="jump" style="animation-delay:0.25s;"> <div class="turn" style="animation-delay:1s;"> <img src="images/characters/npc/thug.png" style="transform:scaleX(-1);"> <<timed 0.25s>> <div class="damage"> <img src="images/characters/npc/thug.png" style="transform:scaleX(-1);"> </div> <</timed>> </div> </div> </div> </div> </div> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(-110%) scaleX(-1);"> <<punch-miss>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(-120%) scaleX(-1);"> <<punch2-miss>> </div> <</timed>> <div class="sprite2" style="left:50%; transform:translateX(-80%);"> <div class="slideR"> <div class="slideR"> <<kick>> </div> </div> </div> <<timed 750ms>> <<char "Thug">>YOU'RE GOING TO PAY FOR THAT, YOU FUCKING - UNNGH!!! <</char>> <</timed>> <<case 13>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="turn"> <img src="images/characters/rora/angry.png"> </div> </div> </div> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-60%);"> <div class="slideR"> <div class="slideR"> <div class="jump" style="animation-delay:0.25s;"> <div class="jump" style="animation-delay:0.25s;"> <div class="turn" style="animation-delay:1s;"> <img src="images/characters/npc/thug.png"> <<timed 0.25s>> <div class="damage"> <img src="images/characters/npc/thug.png"> </div> <</timed>> </div> </div> </div> </div> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(20%)"> <<punch-miss>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(30%);"> <<punch2-miss>> </div> <</timed>> <div class="sprite2" style="left:50%; transform:translateX(-20%) scaleX(-1);"> <div class="slideR"> <div class="slideR"> <<kick>> </div> </div> </div> <<timed 750ms>> <<char "Thug">>I'M GOING TO RIP OUT YOUR - AGHGH!!! <</char>> <</timed>> <<case 14>> <div class="sprite" style="left:50%; transform:translateX(-60%);"> <div class="slideR" style="animation-duration:0.5s;"> <div class="slideR" style="animation-duration:0.5s;"> <div class="turn"> <img src="images/characters/rora/angry.png" style="transform:scaleX(-1);"> </div> </div> </div> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="slideL"> <div class="slideL"> <div class="slideL"> <div class="jump" style="animation-delay:0.25s;"> <div class="jump" style="animation-delay:0.25s;"> <div class="turn" style="animation-delay:1s;"> <img src="images/characters/npc/thug.png" style="transform:scaleX(-1);"> <<timed 0.25s>> <div class="damage"> <img src="images/characters/npc/thug.png" style="transform:scaleX(-1);"> </div> <</timed>> </div> </div> </div> </div> </div> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(-120%) scaleX(-1);"> <<punch-miss>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(-120%) scaleX(-1);"> <<punch2-miss>> </div> <</timed>> <div class="sprite2" style="left:50%; transform:translateX(-80%);"> <div class="slideR"> <div class="slideR"> <<kick>> </div> </div> </div> <<timed 750ms>> <<char>>Rora doesn't have the strength to answer. She needs every ounce of her energy to just keep moving.<</char>> <</timed>> <<case 15>> <<timed 0.5s>> <<replace "#rora">> <div class="jump"> <img src="images/characters/rora/scared.png"> <div class="damage"> <img src="images/characters/rora/scared.png"> </div> </div> <</replace>> <</timed>> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <div id="rora" class="turn"> <img src="images/characters/rora/angry.png"> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-60%);"> <div class="slideR"> <div class="slideR"> <div class="jump" style="animation-delay:0.25s;"> <div class="jump" style="animation-delay:0.25s;"> <div class="turn" style="animation-delay:1s;"> <img src="images/characters/npc/thug.png"> <<timed 0.25s>> <div class="damage"> <img src="images/characters/npc/thug.png"> </div> <</timed>> </div> </div> </div> </div> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(20%)"> <<punch-miss>> </div> <<timed 500ms>> <div class="sprite2" style="left:50%; transform:translateX(30%);"> <<punch2-miss>> </div> <</timed>> <div class="sprite2" style="left:50%; transform:translateX(-20%) scaleX(-1);"> <div class="slideR"> <div class="slideR"> <<kick>> </div> </div> </div> <<timed 750ms>> <<char>>Each time she moves - each time she even takes a breath - she can feel the injury in her side explode with fresh pain, like a knife slowly burying itself deeper into her intestines.<</char>> <</timed>> <<case 16>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <img src="images/characters/rora/angry.png" style="transform:scaleX(-1);"> <div class="damage"> <img src="images/characters/rora/angry.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <img src="images/characters/npc/thug.png" style="transform:scaleX(-1);"> </div> <<char>>If she keeps playing it safe, the injury will slowly wittle her down before she can any real damage. She has to put her all into the next attack, even if if means getting hit with a counter.<</char>> <<case 17>> <<timed 500ms>> <<replace "#rora">> <div class="shake"> <img src="images/characters/rora/scared.png" style="transform:scaleX(-1);"> <div class="damage"> <img src="images/characters/rora/scared.png" style="transform:scaleX(-1);"> </div> </div> <</replace>> <</timed>> <div class="sprite" style="left:50%; transform:translateX(-60%);"> <div class="slideR" style="animation-duration:0.5s;"> <div class="slideR" style="animation-duration:0.5s;"> <div class="jump" style="animation-delay:0.25s;"> <div id="rora" class="jump" style="animation-delay:0.25s;"> <img src="images/characters/rora/angry.png" style="transform:scaleX(-1);"> <div class="damage"> <img src="images/characters/rora/angry.png" style="transform:scaleX(-1);"> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="slideL"> <div class="slideL"> <div class="slideL"> <div class="jump" style="animation-delay:0.25s;"> <div class="jump" style="animation-delay:0.25s;"> <img src="images/characters/npc/thug.png" style="transform:scaleX(-1);"> </div> </div> </div> </div> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(-20%) scaleX(-1);"> <div class="slideR"> <div class="slideR"> <<kick>> </div> </div> </div> <<timed 750ms>> <<char>>She had felt her punch connect. It had been a good punch. But at the same time it had landed she had felt his knuckles bury themselves into her side in passing - right at the broken spot...<</char>> <</timed>> <<case 18>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="shake"> <img src="images/characters/rora/scared.png" style="transform:scaleX(-1);"> <div class="damage"> <img src="images/characters/rora/scared.png" style="transform:scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <img src="images/characters/npc/thug.png" style="transform:scaleX(-1);"> </div> <<char "Thug">>Hehe - gotcha... I knew you couldn't keep running forever...<</char>> <<case 19>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="shake"> <img src="images/characters/rora/scared.png" style="transform:scaleX(-1);"> <div class="damage"> <img src="images/characters/rora/scared.png" style="transform:scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="turn"> <div class="jump" style="animation-delay:1s;"> <img src="images/characters/npc/thug.png" style="transform:scaleX(-1);"> <<timed 1s>> <div class="damage"> <img src="images/characters/npc/thug.png" style="transform:scaleX(-1);"> </div> <</timed>> </div> </div> </div> <<char "Thug">>Now I'm going to... ughh... ghn...<</char>> <<case 20>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="shake"> <img src="images/characters/rora/scared.png" style="transform:scaleX(-1);"> <div class="damage"> <img src="images/characters/rora/scared.png" style="transform:scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="slideR"> <div class="jump" style="animation-delay:1s;"> <div class="jump" style="animation-delay:1.5s;"> <img src="images/characters/npc/thug.png"> <div class="damage"> <img src="images/characters/npc/thug.png"> </div> </div> </div> </div> </div> <<char "Thug">>...going to... krrkk... phk...<</char>> <<case 21>> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="shake"> <img src="images/characters/rora/scared.png" style="transform:scaleX(-1);"> <div class="damage"> <img src="images/characters/rora/scared.png" style="transform:scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-60%);"> <div class="ko"> <div class="shake"> <img src="images/characters/npc/thug.png"> <div class="damage"> <img src="images/characters/npc/thug.png"> </div> </div> </div> </div> <<timed 1s>> <<char>>There is a last gurgle, followed by the sound of his body hitting the floor. The crowd goes dead silent.<</char>> <</timed>> <<case 22>> <div class="sprite fadein" style="left:50%; transform:translateX(-20%); animation-duration:200ms;"> <div class="turn" style="animation-delay:500ms;animation-duration:1s;"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> <div class="damage"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> </div> <div class="sprite fadeout" style="left:50%; transform:translateX(-20%); animation-delay:100ms; animation-duration:200ms;"> <div class="shake"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> <div class="damage"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> </div> <<char>>Then a thousand voices start screaming at once. Some are cheering about the brutality they witnessed. Some are cursing about the money they have lost. And Boris' voice is once more shouting the loudest among them.<</char>> <<case 23>> <div class="sprite fadeout" style="left:50%; transform:translateX(-20%);"> <div class="shake"> <img src="images/characters/rora/neutral.png"> <div class="damage"> <img src="images/characters/rora/neutral.png"> </div> </div> </div> <div class="sprite fadein" style="left:50%; transform:translateX(-50%);"> <div class="turn" style="animation-delay:1s"> <div class="turn" style="animation-delay:2s"> <img src="images/characters/boris/neutral.png"> </div> </div> </div> <<char "boris">>WHAT A TURNAROUND! I CAN'T BELIEVE IT MYSELF! THE CHALLENGER GOES DOWN! THE CHAMPION REMAINS UNDEFEATED!<</char>> <<case 24>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="turn" style="animation-delay:1s"> <div class="turn" style="animation-delay:2s"> <img src="images/characters/boris/neutral.png"> </div> </div> </div> <div class="fadein" style="animation-duration:2s; background:black; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <<char>>Rora doesn't care about any of that. She stumbles towards the next wall, leans her head against the cold hard bricks, and closes her eyes.<</char>> <<case 25>> <div style="background:black; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <<char "rora">>...<</char>> <<case 26>> <div style="background:black; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <<char>>She has barely closed her eyes when a shove against her shoulder forces her to open them up again.<</char>> <<case 27>> <div class="fadeout" style="background:black; position:fixed; top:0; left:0; height:100%; width:100%;"></div> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="blur"> <img src="images/characters/boris/neutral.png"> </div> <div class="drunk"> <img src="images/characters/boris/neutral.png"> </div> </div> <<char "boris">>???? ?? ???? ???? ?????<</char>> <<case 28>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="blur"> <img src="images/characters/boris/neutral.png"> </div> <div class="drunk"> <img src="images/characters/boris/neutral.png"> </div> </div> <<char "rora">>Hnngg... wha-wha...? Whass'goin'on...?<</char>> <<case 29>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="blur"> <img src="images/characters/boris/neutral.png"> </div> <div class="drunk"> <img src="images/characters/boris/neutral.png"> </div> </div> <<char "boris">>??!!!??? ??!?! ????!!!<</char>> <<case 30>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="blur"> <img src="images/characters/boris/neutral.png"> </div> <div class="drunk"> <img src="images/characters/boris/neutral.png"> </div> </div> <<char "rora">>Imma wake 'lright? Can't y-... you jssst gi' me one mommmnnt...<</char>> <<case 31>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="sober"> <img src="images/characters/boris/neutral.png"> </div> </div> <<char>>Bit by bit the image in front of her eyes returns to normal. The surrounding crowd has suddenly vanished. Very strange considering the alley was packed full of people just a second ago.<</char>> <<case 32>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/boris/neutral.png"> </div> <<char "boris">>RORA! HEY?! Are you alright?<</char>> <<case 33>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/boris/neutral.png"> </div> <<char "rora">>Yeah yeah - I'm alright! Can't you just let me sit down for a minute?<</char>> <<case 34>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="slideL"> <div class="slideL"> <div class="turn"> <img src="images/characters/boris/neutral.png"> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img class="fadein" src="images/characters/rora/angry.png" style="animation-duration:1s;"> </div> <<char>>She struggles to get up. Every bone in her body is aching, and the throbbing pain in her side seems even worse now.<</char>> <<case 35>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/angry.png"> </div> <<char "boris">>A minute? You've been lying there for half an hour. I was starting to get worried.<</char>> <<case 36>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char>>It's slightly worrying to have lost this much time, but she really doesn't want him to catch on to that fact. Instead she forces her face to form the same disinterested expression it is always showing.<</char>> <<case 37>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved1.png"> </div> <<char "rora">>Half an hour - whatever - It was just an expression. Point is that I deserve to sit down for a little after that fight.<</char>> <<case 38>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "boris">>Alright. Don't tear my head off, girl. Just want to make sure you're fine. Looked like he got you pretty good back there at some point.<</char>> <<case 39>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "rora">>That? Pfft - that was nothing... I could take a thousand hits like that. Didn't leave a single scratch.<</char>> <<case 40>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div id="rora" class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<timed 0.5s>> <<replace "#rora">> <div class="jump"> <div class="jump"> <img class="shake" src="images/characters/rora/scared.png"> <div class=damage> <img class="shake" src="images/characters/rora/scared.png"> </div> </div> </div> <</replace>> <</timed>> <<char>>She slaps the side of her torso where the thugs attack had connected to prove that it did no lasting damage. Only a split second later she regrets having done so.<</char>> <<case 41>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div id="rora" class="sprite" style="left:50%; transform: translateX(-10%);"> <img class="shake" src="images/characters/rora/scared.png"> <div class=damage> <img class="shake" src="images/characters/rora/scared.png"> </div> </div> <<timed 0.5s>> <<replace "#rora">> <img class="shake" src="images/characters/rora/disappointed.png"> <</replace>> <</timed>> <<char>>Bloody bile forces its way up her throat, as the invisible dagger in her side twists around in her flesh. For a second her calm expression slips. Then she pushes it all away.<</char>> <<case 42>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char>>She can't let Boris know how bad the injury really is, or else he'll force her to stop fighting for two months again. She can't let that happen. Fighting is all she's good for after all.<</char>> <<case 43>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "rora">>There - see? This was nothing. Just a bit of showmanship to get the crowd riled up.<</char>> <<case 44>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <<char "boris">>Ahaha - that's my girl! And it worked great. We made some nice cash today, and I made a little extra on the side as well...<</char>> <<case 45>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="sway" style="animation-iteration-count:2; animation-duration:0.4s;"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <<char>>He reaches into his pocket, and produces a couple of mismatching wallets, a sly grin twitching on his face.<</char>> <<case 46>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/happy.png"> </div> <<char "rora">>Ah - fucking hell Boris. You're already robbing them blind with your damn bets. Do you really have to pick their pockets as well?<</char>> <<case 47>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <<char "boris">>Hey! Not my fault these idiots are this careless. If I don't steal their wallets, then somebody else will, so it might as well be me.<</char>> <<case 48>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="slideR" style="animation-duration:0.5s"> <div class="slideL" style="animation-delay:0.5s;animation-duration:0.5s"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <<char "boris">>And here's your cut of the betting money by the way. You did extra good riling 'em up today, so I put a little bonus on top.<</char>> <<case 49>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/happy.png"> </div> <<char "rora">>Always a pleasure to put on a show.<</char>> <<case 50>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div id="rora" class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <<timed 0.5s>> <<replace "#rora">> <div class="jump"> <div class="jump"> <img class="shake" src="images/characters/rora/scared.png"> <div class=damage> <img class="shake" src="images/characters/rora/scared.png"> </div> </div> </div> <</replace>> <</timed>> <<timed 1.5s>> <<replace "#rora">> <img src="images/characters/rora/peeved.png"> <</replace>> <</timed>> <<char>>It's hard to keep the cool expression, when every motion causes the cutting pain to bury itself even deeper, until it wraps around her whole torso like a blanket of feral teeth.<</char>> <<case 51>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <<char>>She takes a sharp breath, and as she does a familiar scent drifts into her eyes - sharp and biting and with a hint of numbing cold. Her eyes immediately snap towards a group of people in the distant, huddled close together.<</char>> <<case 52>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="turn"> <div class="turn" style="animation-delay:1s;"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <<char>>The dense smoke of their electric huffsticks rises abover their heads, twirling and twisting in the air, and the sticks themselves glow up each time one of them takes another huff. It's mesmerizing. Some part of her wants to step closer.<</char>> <<case 53>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <div class="jump"> <img src="images/characters/rora/scared.png"> </div> </div> <<char "boris">>HEY KID! Don't tell me you're thinking about doing that shit again!<</char>> <<case 54>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved1.png"> </div> <<char "rora">>No… Fuck no. I was just looking.<</char>> <<case 55>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "boris">>Just looking… Yeah well I know that look. Just don't do it. These sticks will fuck you up good.<</char>> <<case 56>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved1.png"> </div> <<char "rora">>Yes - I know - I don't need a fucking lecture.<</char>> <<case 57>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/chill.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "boris">>Look. I know how tempting it is - just feeling all numb and cozy. But pain is important, alright. Trust me. I'm speaking from experience. You know how I got my eye, don't you?<</char>> <<case 58>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/chill.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "rora">>Yes, you only told me the story a thousand times, so you don't need to tell it again…<</char>> <<case 59>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="slideL"> <div class="turn"> <img src="images/characters/boris/chill.png" style="transform:scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "boris">>I mean - Back then I knew that I had fucked up my arm during that botched break-in. It was bending the wrong way, but I just didn't care.<</char>> <<case 60>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <div class="slideR"> <div class="turn"> <img src="images/characters/boris/chill.png"> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "boris">>But I never even noticed that there was a shard of glass sticking out of my eye. Took three days until I ran out of sticks ro keep me nice and numb, and then the pain came all of the sudden…<</char>> <<case 61>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "boris">>If that had never happened - maybe I'd be the one out there fighting instead of you.<</char>> <<case 62>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/happy.png"> </div> <<char "rora">>No you wouldn't. You're way too old, you ancient geezer.<</char>> <<case 63>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/happy.png"> </div> <<char "boris">>Aw come on. We're just ten years apart. I'm not that old yet…<</char>> <<case 64>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <<char "boris">>So - you wanna come and celebrate a little? Spend your money to live the good life for a night? I've got some friends who'd love to meet you -<</char>> <<case 65>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "rora">>Sorry - I just want to lie down and get some rest.<</char>> <<case 66>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <<char "boris">>Geez. You really need to start learning to have some fun. There's more to life than getting your face stomped in by random strangers in some filthy alley.<</char>> <<case 67>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "rora">>Yeah - but I still think I pass…<</char>> <<case 68>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "boris">>I'm serious. Do you ever go out? Or do you just stay curled up in your apartment all day until I send you the details for the next fight.<</char>> <<case 69>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "rora">>I'm not just lying around. I do... stuff...<</char>> <<case 70>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "boris">>Really... You do - stuff? Like what?<</char>> <<case 71>> <div style="position:fixed; left:50%; top:50%; transform: translate(-50%, -50%);"> <div class="slideR"> <div class="fadein option" style="transform: translateX(-20%);"> Cooking <<link "">> <<set $passage to "A1S2P2-O1">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> <div class="slideL"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> Taking care of her plants <<link "">> <<set $passage to "A1S2P2-O2">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> <div class="slideR"> <div class="fadein option" style="margin-top:1em; transform: translateX(-20%);"> Long walks at the beach. <<link "">> <<set $passage to "A1S2P2-O3">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> </div> <<set setup.skip to false>> <</switch>>
<<widget "auto">> <span id="auto"> <<if setup.auto>> <div class="selected">Auto</div> <<else>> Auto <</if>> </span> <<link "">> <<if setup.auto>> <<set setup.auto to false>> <<replace "#auto">>Auto<</replace>> <<else>> <<set setup.auto to true>> <<replace "#auto">><div class="selected">Auto</div><</replace>> <</if>> <</link>> <</widget>> <<widget "skip">> <<link "">> <<if setup.skip>> <<set setup.skip to false>> <<else>> <<set setup.skip to true>> <<set $count++>> <<goto "play">> <</if>> <</link>> <</widget>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char>>She opens her mouth to say something, but her voice just trails off, and Boris raises raises his brows in an overexaggerated manner.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "boris">>So that's all your life? Fighting, and training for the next fight? No wonder you got addicted to those fucking sticks.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char>>Rora doesn't answer at first, but in a way he actually hit the nail on the head.<</char>> <<case 3>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char>>She's good at breaking things, and not much else. Better to stay on her own. Better to keep her distance. Better not to get involved with anyone.<</char>> <<case 4>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "boris">>You do know that there's more to life, right? Just come with me one night - who knows - you might meet some people - have a great tome -... find someone you're interested in…<</char>> <<case 5>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved1.png"> </div> <<char "rora">>Pass. No fucking way. I don't need that fucking hassle. Just let me go home, and get some fucking sleep. <</char>> <<case 6>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "boris">>Okay - okay… Just wanted to make the offer…<</char>> <<case 7>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <<char "rora">>Right - well - thanks. But I'm just too tired today.<</char>> <<case 8>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <div class="slideR"> <div class="turn"> <img src="images/characters/rora/neutral.png"> </div> </div> </div> <<char>>With a sigh she stretches her aching shoulders, and turns. Her eyes travel upward, past the narrow confines of the narrow alley.<</char>> <<case 9>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> <<char>>Up there ahead of her the golden glow of the upper city illuminates the distant nightsky, stretching high above the decaying buildings of the slums. Boris steps a little closer, and looks towards the light as well.<</char>> <<case 10>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="slideR"> <div class="slideR"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> <<char "boris">>Those fucking rich bastards up there are probably having a great time right now.<</char>> <<case 11>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> <<char "rora">>Yeah…<</char>> <<case 12>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> <<char "boris">>Must be nice never having to work a single day in your fucking life. Just sitting on your golden throne, being fed diamond crusted oysters by an army of butlers.<</char>> <<case 13>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> <<char "rora">>Yeah…<</char>> <<case 14>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> <<char "boris">>Can't trust any of them of course. You and me, we're not even people to these rich fucks. Just little toys to be tossed around.<</char>> <<case 15>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> <<char "rora">>Hmm…<</char>> <<case 16>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="slideL"> <div class="turn"> <div class="turn" style="animation-delay:1s;"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <div class="turn"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> <<char "boris">>Anyway - I'm off. Probably heading towards the Shark Nest if you maybe want to join me later after all.<</char>> <<case 17>> <div class="sprite" style="left:50%; transform: translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/rora/neutral.png"> </div> <<char "rora">>I won't. But you have fun.<</char>> <<case 18>> <div class="sprite" style="left:50%; transform: translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/rora/neutral.png"> </div> <<char "boris">>Alright. And I drop by your flat once I set up the next fight. Gonna be at least a week though.<</char>> <<case 19>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="slideL"> <div class="slideL"> <div class="turn"> <img class="fadeout" src="images/characters/boris/neutral.png" style="transform:scaleX(-1);animation-delay:0.3s; animation-duration:0.5s;"> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <div class="slideL"> <div class="slideL"> <img src="images/characters/rora/disappointed.png"> </div> </div> </div> <<char>>He leaves with a last wave of his hand. Rora remains standing there, trying her hardest to ignore to scent of huffsticks still lingering in the air.<</char>> <<case 20>> <div class="sprite" style="left:50%; transform: translateX(-30%);"> <div class="slideR"> <div class="turn"> <img src="images/characters/rora/neutral.png"> </div> </div> </div> <<char>>She tries to focus on the lights of the upper city instead - something beautiful but also unreachable.<</char>> <<case 21>> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char>>But it's nice to imagine there might be some treasure hidden up there, some secret that'd prove her life could be about more than just fighting, eating, and falling asleep.<</char>> <<case 22>> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <div class="slideL"> <div class="turn"> <img src="images/characters/rora/angry.png" style="transform:scaleX(-1);"> </div> </div> </div> <<char "rora">>Hmph - Yeah sure. As if... Fucking bullshit.<</char>> <<case 23>> <div class="sprite" style="left:50%; transform: translateX(-30%);"> <div class="turn"> <img src="images/characters/rora/neutral.png"> </div> </div> <div class="fadein" style="opacity:0; position: fixed; background:black; top:0; left:0; right:0; bottom:0;"> </div> <<char>>And yet she can't tear her eyes away from the sight for quite a while...<</char>> <<set $count to -1>> <<set $passage to "A1S3P1">> <</switch>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "rora">>I - uhm... - I cook and stuff... Important to eat properly to stay fit.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "boris">>Oh... You've become a chef now? Always good to pick up some new skills. What's the last thing you cooked?<</char>> <<case 2>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "rora">>Uh - well - uhm... You know how those green nutrient shakes are way too bitter, and the white ones are super bland...<</char>> <<case 3>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "boris">>Hmm... Yeah - let me guess. You just poured the two toghether, and that's the extend of your cooking...<</char>> <<set $passage to "A1S2P3">> <<set $count to -1>> <</switch>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "rora">>I just take care of my plants back home. Helps me calm down and get into a good headspace.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "boris">>Your plants back home? Are you maybe talking about the algae that keeps spreading in your bath.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "rora">>I... I mean... I do need to take care of them, or else they'll spread everywhere.<</char>> <<case 3>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "boris">>So when you're not out here getting punched in the face, you're at hime scrubbing mold? Sounds like a fun life you've got yourself there...<</char>> <<set $passage to "A1S2P3">> <<set $count to -1>> <</switch>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "rora">>Well - I take long and relaxing strolls through the neighborhood.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <<char "boris">>Oh yeah - strolling through heaps of rat infested trash sounds like a fun past time. Is that really what you're doing?<</char>> <<case 2>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "rora">>Yes - kind of - I mean I'm not strolling exactly. It's more like running - jogging - to keep my stamina up for the next fight.<</char>> <<case 3>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <<char "boris">>Then that's just training, Rora. What are you doing in your free time? What are you doing just for fun?<</char>> <<set $passage to "A1S2P3">> <<set $count to -1>> <</switch>>
<<replace "#back">> <div class="slum" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("crowd")>> <div class="sprite2" style="opacity:0; left:50%;"> <<kick>> </div> <<replace "#effect">> <<include "slum-crowd">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> <div class="fadeout" style="position:fixed; top:0;left:0;right:0;bottom:0; background:black; animation-delay:1s; animation-duration:1s;"></div> </div> <<timed 1s>> <<char>>The lower city market is filled with the scent of a thousand things rotting and rusting. Piles of old machine parts and scrap metal are stacked high between flimsy makeshift stalls.<</char>> <</timed>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img class="fadein" src="images/characters/npc/fem3.png" style="transform: scaleX(-1);"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char>>Traders and Peddlers scream and shout, all of them locked in an unending competition to attract the few paying customers that frequent this place. The rest of the people are beggars, scam artists and pickpockets.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideL" style="animation-delay:0.5s;"> <div class="slideL" style="animation-delay:0.5s;"> <div class="jump" style="animation-delay:0.5s;"> <div class="turn" style="animation-delay:1s;"> <img src="images/characters/npc/fem3.png" style="transform: scaleX(-1);"> </div> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div id="boris" class="slideL"> <img class="fadein" src="images/characters/boris/neutral.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(10%);"> <div class="slideL"> <img class="fadein" src="images/characters/rora/neutral.png"> </div> </div> <<timed 0.5s>> <div class="sprite2" style="left:50%; transform:translateX(-50%);"> <<kick>> </div> <</timed>> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<timed 1s>> <<replace "#boris">> <img src="images/characters/boris/chill.png"> <</replace>> <<char "boris">>Oh! So sorry…<</char>> <</timed>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <div class="slideL"> <div class="slideL"> <div class="turn"> <img div class="fadeout" src="images/characters/npc/fem3.png" style="animation-duration:1s;"> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div id="boris" class="turn" style="animation-delay:1s;"> <img src="images/characters/boris/chill.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<timed 1s>> <<replace "#boris">> <img src="images/characters/boris/smile.png"> <</replace>> <<char "boris">>Ha - got another one!<</char>> <</timed>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char>>Boris stealthily presents the little leather pouch he just swiped from the drunk stranger, before quickly sliding it into his pocket.<</char>> <<case 5>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideL"> <div class="turn"> <div class="turn" style="animation-delay:1s;"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Great. Very impressive. She truly looked like she was carrying a fortune in there, so I'm sure you've just become rich.<</char>> <<case 6>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Hey! It's not about making money. It's about keeping your skills from getting rusty.<</char>> <<case 7>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved1.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Yeah - speaking of which… I can already feel my skills getting rusty myself. Did you finally find a new challenger? It's been a week already…<</char>> <<case 8>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>I have somebody lined up. Tough girl from the harbor. Pretty sure she got illegal steel implants at the stomach and torso. Do you feel fit to face her? Are all the injuries healed?<</char>> <<case 9>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Never had any injuries in the first place. Everything's fine.<</char>> <<case 10>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char>>She is indeed fine insofar as she can now lightly slap the side of her torso without toppling over, but she can still feel it whenever she moves a bit too quickly, or bends the wrong way, or takes a deep breath...<</char>> <<case 11>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char>>It should be alright though. She'll just have to make sure not to get hit right there, or anywhere near it.<</char>> <<case 12>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>I'm completely fit. Tonight then? Or tomorrow?<</char>> <<case 13>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Whoa there, kid! This stuff needs time. Need to make some promotion, talk to a few people. We'll want to draw in the right crowd after all. Friday next week we should be ready to go.<</char>> <<case 14>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/angry.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Friday? That's ten days from now. What the hell am I supposed to do till then?<</char>> <<case 15>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>What do you mean? Did you run out of cash already? Need me to lend you some?<</char>> <<case 16>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>No. I have tons of creds stashed away. It's just… It's just fucking boring… Just let me fight already!<</char>> <<case 17>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Hah! Always so eager to get back into things. Just last week you were lying in the alley, groaning and complaining.<</char>> <<case 18>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/angry.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Well - that was then - this is now - just need another fight.<</char>> <<case 19>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Hehehe - Just as lively as ever. You should really learn to enjoy those little moments of peace though.<</char>> <<case 20>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Maybe you can accompany me a little when I go out tonight? We'll hit a few bars to get the word out about the upcoming fight, and hey - maybe we can enjoy ourselves at the side a little.<</char>> <<case 21>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved1.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Ugh… no… thanks, but… That's just not what I need right now. I just need to punch something. Maybe some other time…<</char>> <<case 22>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Oh please, kid. Next time you'll just be busy training for the next fight. And then the next, and the next. No need to humor an old bear like me. I'm just a little worried, you know.<</char>> <<case 23>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Worried about what?<</char>> <<case 24>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>About you. About what you're gonna do when you get really hurt one of these days, and can't go on fighting anymore.<</char>> <<case 25>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved1.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Pff - as if that's ever gonna happen…<</char>> <<case 26>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/chill.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Yeah… That's what I thought too, when I was younger. But your body's not gonna keep up forever. You'll need the first implants soon, and once then things will start breaking faster and faster…<</char>> <<case 27>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/chill.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>I just want you to be ready for that day. You need something other than fighting in your life. You need to learn to have some fun, you know?<</char>> <<case 28>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/angry.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>I have fun… I have fun when I get to punch somebody.<</char>> <<case 29>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/chill.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Right. But when you take a quick break in between all of the punching, you should look for something else you'd enjoy doing.<</char>> <<case 30>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>It's - … It's just… This is the only thing I'm good at.<</char>> <<case 31>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/chill.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>You could be good at a lot of things, but you'll never learn unless you get out there one of these days.<</char>> <<case 32>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Sure - one of these days - but not right now…<</char>> <<case 33>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char>>Not ever if she can prevent it. What's the point in even trying? No reason to let him know about that though. Better to bottle it all up. Better not to show weakness. That's how you survive down here.<</char>> <<case 34>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/chill.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Doesn't need to be today. As long as you give it a good thought.<</char>> <<case 35>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <div class="slideR" style="animation-duration:0.5s;"> <div class="slideL" style="animation-delay:0.5s; animation-duration:0.5s;"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char>>He slaps his heavy hand onto her shoulder, and lets out a laugh.<</char>> <<case 36>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>And that doesn't mean that I want you to slack off of course. You'll have to find a nice balance between training and having fun.<</char>> <<case 37>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>So - next week Friday then. Be ready. We'll make some good money, I can already feel it in my bones.<</char>> <<case 38>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char>>Before he can go on any further, an angry argument erupts just a few steps ahead between one of the vendors, and a random delivery driver, dressed in an upper town worker uniform. Boris' expression instantly darkens.<</char>> <<case 39>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img class="fadeout" src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="fadeout" src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <div class="chat"> <img class="fadein" src="images/characters/npc/thug2.png"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="fadein" src="images/characters/npc/male4.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "Vendor">>I AM NOT PAYING FOR THAT! IT LOOKS LIKE SOMEBODY STOMPED ALL OVER THE WARES! NOBODY'S GOING TO BUY THIS!<</char>> <<case 40>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/npc/thug2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="chat" src="images/characters/npc/male4.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "Driver">>Hey! They were like this when I got them, alright? You got any problem with that, then just take it up with my boss.<</char>> <<case 41>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/npc/thug2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/npc/male4.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char>>He motions towards a set of crates that have been unloaded in front of the vendor's stand. One of them has been opened, revealing pulp of mashed up fruit.<</char>> <<case 42>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/npc/thug2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/npc/male4.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char>>They would be perfectly fine, if it wasn't for the fact that most of them have been mashed into a pulp. It almost looks as if some large animal has slipped inside the wooden box to make its nest in there.<</char>> <<case 43>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img class="chat" src="images/characters/npc/thug2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/npc/male4.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "Vendor">>OH I WILL TALK TO YOU BOSS! FUCKING RICH PRICK! THINKS HE CAN TREAT ME LIKE SHIT JUST CAUSE I'M FROM THE LOWER CITY, EH? IS THAT IT.<</char>> <<case 44>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/npc/thug2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="chat" src="images/characters/npc/male4.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "Driver">>Hey - look. I'm not looking to start a fight, okay. I'm just a driver. I was told to load the crates and drive them down here, and that's what I did, so-<</char>> <<case 45>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img class="chat" src="images/characters/npc/thug2.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/npc/male4.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "Vendor">>SO NOW YOU GET TO DRIVE IT ALL BACK AGAIN, AND SHOVE IT INTO THAT FUCKERS ASS! CAUSE I'M NOT PAYING!<</char>> <<case 46>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img class="fadeout" src="images/characters/npc/thug2.png"> </div> <div class="fadeout" class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/npc/male4.png"> </div> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <div class="slideR" style="animation-delay:0.5s;"> <img class="fadein" src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img class="fadein" src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char>>Boris takes a step forward, his hands balled into fists, an expression of pure disdain painted on his face.<</char>> <<case 47>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Fucking upper city shit. See that? Always trying to push us even deeper into the mud. Feeding us their scraps like we're their fucking little circus freaks. I should just go over there and -<</char>> <<case 48>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideL" style="animation-delay:0.5s"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <div class="slideL"> <div class="slideR" style="animation-delay:1s;"> <img src="images/characters/rora/neutral.png"> </div> </div> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Hey. Calm down.<</char>> <<case 49>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Why should I? Somebody needs to tell that piece of upper city shit that he can't just go around scamming honest traders like that.<</char>> <<case 50>> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <div style="position:fixed; left:50%; top:50%; transform: translate(-50%, -50%);"> <div class="slideR"> <div class="fadein option" style="transform: translateX(-20%);"> He's not really from the upper city. He's just a hired driver. <<link "">> <<set $passage to "A1S4P1-O1">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> <div class="slideL"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> That's not actually an honest trader, is it? <<link "">> <<set $passage to "A1S4P1-O2">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> <div class="slideR"> <div class="fadein option" style="margin-top:1em; transform: translateX(-20%);"> Better not to get involved in other people's business. <<link "">> <<set $passage to "A1S4P1-O3">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> </div> <<set setup.skip to false>> <</switch>>
<div id="crowd" class="crowd" style="animation-name:none; position:absolute; top:0; left:0; height:100%; width:100%;"> <div class="chat" style="right: 50%; bottom:20%; height: 70%;"> <img src="images/characters/npc/fem5.png"> </div> <div class="chat" style="right: 60%; bottom:20%; height: 70%; animation-delay:0.7s;"> <img src="images/characters/npc/male1.png"> </div> <div style="right: 45%; bottom:10%; height: 80%;"> <img class="wandering" src="images/characters/npc/fem4.png"> </div> <div class="idle" style="right: 40%; bottom:7%; height: 85%;"> <img src="images/characters/npc/male3.png"> </div> <div style="left: -30%; bottom:7%; height: 85%;"> <img class="wandering" src="images/characters/npc/male2.png" style="animation-delay:1s;"> </div> <div class="idle" style="left: 20%; bottom:3%; height: 90%; animation-delay:1.3s;"> <img src="images/characters/npc/fem2.png"> </div> <div class="chat" style="right: 0%; bottom:3%; height: 90%; animation-delay:0.3s;"> <img src="images/characters/npc/fem6.png"> </div> </div>
<<replace "#back">> <div class="slum" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("crowd")>> <<replace "#effect">> <<include "slum-crowd">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Just look at him, Boris. That's not some upper city snob. He's just some driver - from down here - just like us.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Oh - so I should just ignore that he put's on their fancy uniform, then runs around to do their bidding? A traitor punk like that deserves a good thrashing just as much as his bosses...<</char>> <<set $count to -1>> <<set $passage to "A1S4P2">> <</switch>>
<<replace "#back">> <div class="slum" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("crowd")>> <<replace "#effect">> <<include "slum-crowd">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Yeah... I'm pretty sure that's not an honest trader. He's been pretending that the roasted rat meat he's selling is genuine pork for as long as I can remember.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>You love some good old rat meat too. Nothing wrong that. But when one of those upper cits bozo's comes down here and starts bossing us around like that - that's when we have a real issue.<</char>> <<set $count to -1>> <<set $passage to "A1S4P2">> <</switch>>
<<replace "#back">> <div class="slum" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("crowd")>> <<replace "#effect">> <<include "slum-crowd">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>We'll get nothing out of this but trouble. You always tell me to keep my nose out of other people's business.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Yes - YOU should keep your nose out of other people's business, cause you're terrible at that. I on the other hand know what I'm doing here. Dealing with people is my job after all...<</char>> <<set $count to -1>> <<set $passage to "A1S4P2">> <</switch>>
<<replace "#back">> <div class="slum" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("crowd")>> <div class="sprite2" style="opacity:0; left:50%;"> <<kick>> </div> <<replace "#effect">> <<include "slum-crowd">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Well... alright then...<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/angry.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <div class="turn"> <img class="sway" src="images/characters/rora/angry.png"> </div> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Let's go! I'm ready whenever you give me the word!<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <div class="sway"> <img src="images/characters/rora/angry.png" style="transform:scaleX(-1)"> </div> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>What are you doing, kid?<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <div class="sway"> <img src="images/characters/rora/angry.png" style="transform:scaleX(-1)"> </div> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>If you're starting a fight, then I'll obviously have you back! Doesn't matter if we're both getting arrested...<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(-70%);"> <div class="slideR"> <div class="slideL" style="animation-delay:1s"> <div class="slideL" style="animation-delay:1s"> <img src="images/characters/boris/chill.png" style="transform:scaleX(-1);"> </div> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <div class="slideL" style="animation-delay:1s"> <img src="images/characters/rora/angry.png" style="transform:scaleX(-1)"> </div> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Alright, kid. I get what you're trying to do. No need to get the both of us in trouble, I guess.<</char>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="turn"> <img src="images/characters/rora/happy.png" style="transform:scaleX(-1)"> </div> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Oh - so no fight then? That's a shame... I was already itching to get my knuckles bloody...<</char>> <<case 5>> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <img src="images/characters/boris/chill.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Guess I can let this upper city asshole get away this once...But I'm doing this only to keep you out of trouble.<</char>> <<case 6>> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/happy.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>Damn... No fight after all... Guess I'll just have wait for next week...<</char>> <<case 7>> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <img src="images/characters/boris/smile.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "boris">>Yup - next week - friday - I'll swing by your place tomorrow to let you know some more details. Don't do anything stupid till then. <</char>> <<case 8>> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <img src="images/characters/boris/neutral.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/happy.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char "rora">>No need to worry. I never do anything stupid unless I have you explicit permission. See you tomorrow then.<</char>> <<case 9>> <div class="sprite" style="left:50%; transform:translateX(-90%);"> <div class="slideL"> <div class="turn"> <img class="fadeout" src="images/characters/boris/neutral.png" style="transform:scaleX(-1); animation-duration:1s;"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/neutral.png"> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <<char>>He gives her a nod, then turns and pushes his way through the crowd. Within a few seconds he has vanished within the mass of people.<</char>> <<case 10>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="slideR"> <div class="turn"> <img class="fadeout" src="images/characters/rora/neutral.png" style="animation-duration:1s;"> </div> </div> </div> <div class="slum2" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <div class="fadein" style="opacity:0; position:fixed; top:0;left:0;right:0;bottom:0; background:black; animation-duration:1s; animation-delay:0.5s;"></div> <<char>>Rora turns the opposite direction. It's time to get out of here, and head home. She circles around the trader and the driver, who are still fighting over the faulty delivery, and heads to a small alley behind their backs.<</char>> <<set $count to -1>> <<set $passage to "A1S4P3">> <</switch>>
<<replace "#back">> <div class="plaza" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("crowd")>> <<replace "#effect">> <<include "plaza">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="fadeout" style="position:fixed; top:0;left:0;right:0;bottom:0; background:black; animation-delay:1s; animation-duration:1s;"></div> </div> <<timed 1s>> <<char>> Soothing music plays from the invisible speakers of the grand plaza high rise, the upper town's most prestigious shopping center. <</char>> <</timed>> <<case 1>> <<char>> Glistening luxury beckons from the glass displays of the various boutiques lining the bright hallways - delicate jewelry, limited edition wrist watches, fur coats made from near extinct animals.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="idle"> <img class="fadein" src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img class="fadein" src="images/characters/opaline/sad1.png"> </div> <<char>> Opaline's father moves from one window to the next, like a moth fluttering through a room full of candles, uncertain which flame to plunge into.<</char>> <<case 3>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img class="chat" src="images/characters/npc/everhart.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char "Sir Everhart">> Oh - maybe a nice necklace like this? It has the same color as your eyes. I'm sure Sir Ingot would really appreciate it, don't you think so my little darling?<</char>> <<case 4>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="turn"> <img src="images/characters/npc/everhart.png"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char "opaline">> D-dad… I don't really want to…<</char>> <<case 5>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "Sir Everhart">> Oh don't be silly Opaline. You need to make yourself really presentable for your next little outing with him. I have it on good authority that this will be a very special date. <</char>> <<case 6>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char "opaline">> I-it's just… I… I don't want to…<</char>> <<case 7>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="turn"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "Sir Everhart">> And you haven't seen each other properly in a week, so it's all the more important to put some effort into your looks. Us men are visual creatures, you know…<</char>> <<case 8>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="slideL"> <img src="images/characters/npc/everhart.png"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char>> He chuckles to himself, as he approaches the next window, and begins to inspect the sheer dresses on display, while Opaline remains rooted a few feet behind him, nervously fidgeting with the hem of her dress.<</char>> <<case 9>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img class="chat" src="images/characters/npc/everhart.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char>> It has indeed been almost a week since her last date at Ingot's mansion. She ran into him here and there since then, but each time she managed to find some excuse not to end up alone with him.<</char>> <<case 10>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img class="chat" src="images/characters/npc/everhart.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img class="shake" src="images/characters/opaline/sad1.png"> </div> <<char>> At night she dreams of being back in that hallway, her back pinned against the walls. And he is right in front of her, his claw wandering beneath her eyeball, pressing tighter and tighter.<</char>> <<case 11>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <div class="turn"> <img src="images/characters/npc/everhart.png"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char "opaline">> Dad, do I really have to see Sir Ingot again this weekend?<</char>> <<case 12>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <div class="slideR"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "Sir Everhart">> What are you talking about,darling? You don't HAVE to see anybody. But you're of course allowed to meet Sir Ingot.<</char>> <<case 13>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char "opaline">> B-but… what if I don't want…<</char>> <<case 14>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "Sir Everhart">> Oh… Oh I see what this is! Are you worried he's just playing around with you? That he doesn't really like you? I know that he has some reputation as a playboy, but those are just some jealous rumors.<</char>> <<case 15>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char "opaline">> …n-no… I'm just… I-... it's just that…<</char>> <<case 16>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "Sir Everhart">> You don't have to worry about this. He truly cares about you, you know.<</char>> <<case 17>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "Sir Everhart">> In fact - well… Maybe I shouldn't tell you just yet, but he has officially asked for our approval.<</char>> <<case 18>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/neutral.png"> </div> <<char "opaline">> Approval…? F-for what?<</char>> <<case 19>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <div class="jump"> <img class="jump" src="images/characters/opaline/scared1.png"> </div> </div> <<char "Sir Everhart">> I'm talking about marriage, my little gem. He plans to officially ask for your hand - maybe this weekend even. <</char>> <<case 20>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img class="shake" src="images/characters/opaline/scared1.png"> </div> <<char "Sir Everhart">> That's why we are out here looking for something fancy for you to wear. You need to look perfect.<</char>> <<case 21>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img class="shake" src="images/characters/opaline/scared1.png"> </div> <<char "opaline">> I-... I-... I-…<</char>> <<case 22>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img class="shake" src="images/characters/opaline/scared1.png"> </div> <<char>> She feels a shiver run over her entire body. Her mouth opens, but her tongue is unable to move properly all of the sudden.<</char>> <<case 23>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img class="shake" src="images/characters/opaline/scared.png"> </div> <<char>> Suddenly it doesn't feel as if she is standing in the middle of a busy market anymore. She's back in Ingot's study, her body pinned against the wall, his grasp tightening around her.<</char>> <<case 24>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img class="jump" src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img class="shake" src="images/characters/opaline/scared.png"> </div> <<char "Sir Everhart">> Ah - I should have not said anything and let it be a surprise. Just look at you overwhelmed by feelings. You always look as if you're about to cry when you get excited like that, you know.<</char>> <<case 25>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad.png"> </div> <<char "opaline">> D-ad, I-...<</char>> <<case 26>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="slideL"> <div class="turn"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);" style="animation-delay:1s;"> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad3.png"> </div> <<char>> Her voice is barely more than a shivering whisper, but she suddenly lacks the strength to talk any louder than that.<</char>> <<case 27>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img src="images/characters/npc/everhart.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad.png"> </div> <<char "opaline">> I- I can't… I'm… afraid… he makes me afraid…<</char>> <<case 28>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img class="turn" src="images/characters/npc/everhart.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad3.png"> </div> <<char>> Her father shakes his head, a smile on his face.<</char>> <<case 29>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <div class="slideR"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad3.png"> </div> <<char "Sir Everhart">>Oh, now you're just shy. I can't even blame you, he is the most well-liked man in the upper city. I think any young girl would get flustered and nervous if he asked for her hand.<</char>> <<case 30>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad3.png"> </div> <<char "Sir Everhart">>But don't worry. Your mother and I support you, and we'll make sure that everything goes perfectly.<</char>> <<case 31>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad.png"> </div> <<char "opaline">> N-no… he - he - he makes me afraid - b-because he hurts me…<</char>> <<case 32>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="jump"> <div class="jump"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad3.png"> </div> <<char>> His amusement has left his face all of the sudden, replaced by a deep frown.<</char>> <<case 33>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad3.png"> </div> <<char "Sir Everhart">> What are you talking about? He's never hurt you.<</char>> <<case 34>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad.png"> </div> <<char "opaline">> H-he does… when we're alone…<</char>> <<case 35>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="turn" style="animation-delay:0.5s"> <div class="turn" style="animation-delay:1.5s"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad3.png"> </div> <<char "Sir Everhart">> Opaline! You better not be making up some story here! He's one of the richest and most important men in the entire country. Do you even know how bad it is to make up lies like this?<</char>> <<case 36>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad.png"> </div> <<char "opaline">> …it's not a lie…<</char>> <<case 37>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad3.png"> </div> <<char "Sir Everhart">> Then tell me exactly what he did!<</char>> <<case 38>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad.png"> </div> <<char "opaline">> … he… when we were alone… he… he gripped my arm real hard, and he - held me against a wall, and…<</char>> <<case 39>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="jump"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char>> For a second the stern frown remains on her father's face. Then the expression gives way to another bellowing laugh.<</char>> <<case 40>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="chat"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "Sir Everhart">> Oh - my… You had me worried there for a second. Oh Opaline, you've always been so sensitive.<</char>> <<case 41>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "Sir Everhart">> Did you even hear your own words? He grabbed your arm? And he held you against a wall? Is that all he did, little gem?<</char>> <<case 42>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/angry.png"> </div> <<char "opaline">> …but it hurt… he - he did it really hard and it hurt…<</char>> <<case 43>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="slideL"> <div class="turn"> <img src="images/characters/npc/everhart.png" style="transform: scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "Sir Everhart">> Opaline, darling, he is a man, and like all men he is ruled by a certain passion. He's probably not aware just how delicate you are. Did you tell him that he was holding your wrist too tight?<</char>> <<case 44>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img src="images/characters/npc/everhart.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "opaline">> …no…<</char>> <<case 45>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img class="turn" src="images/characters/npc/everhart.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "Sir Everhart">> See?! You didn't tell him, so how was he supposed to know? This was really more your fault than his.<</char>> <<case 46>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "opaline">> …yes…<</char>> <<case 47>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <div class="turn"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "Sir Everhart">> I hope you haven't told anybody else about this nonsense of him hurting you. And you should really talk to him first when it comes to things like that. That'll be very important once you are married.<</char>> <<case 48>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img class="chat" src="images/characters/npc/everhart.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char "opaline">> …b-but…<</char>> <<case 49>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img class="chat" src="images/characters/npc/everhart.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad2.png"> </div> <<char "Sir Everhart">> So exciting - and it will be a huge step forward for the entire family too. Our little Opaline - married to Sir Ingot, the Third.<</char>> <<case 50>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img class="chat" src="images/characters/npc/everhart.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "opaline">> …yes…<</char>> <<case 51>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <img class="chat" src="images/characters/npc/everhart.png"> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <img src="images/characters/opaline/sad1.png"> </div> <<char "Sir Everhart">> I think we'll take the silk one with the little ribbons, but I need to check whether they have it in a different color. And maybe I'll see if they have some matching scarves as well before making my final decision.<</char>> <<case 52>> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <div class="slideL"> <img class="fadeout" src="images/characters/npc/everhart.png" style="animation-duration:1s;"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-10%);"> <div class="slideL"> <img src="images/characters/opaline/sad2.png"> </div> </div> <<char>> It feels almost as if her protest never even happened, now that his attention has returned to choosing the perfect dress. He steps into the shop, and leaves Opaline alone with her desperate thoughts.<</char>> <<case 53>> <div class="sprite" style="left:50%; transform: translateX(-30%);"> <div class="slideL"> <img src="images/characters/opaline/sad2.png"> </div> </div> <<char>> She could of course just say 'No'. She could have always said 'No', but she already knows that she won't be able to. It's something she never could do. Not really. Not for good.<</char>> <<case 54>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="slideL"> <img src="images/characters/opaline/sad2.png"> </div> </div> <<char>> There's no way out of this. There's nothing she can do, but to just go along with it all in meek silence. There's nowhere to run.<</char>> <<case 55>> <div class="sprite" style="left:50%; transform: translateX(-70%);"> <div class="slideL"> <div class="turn"> <div class="jump"> <img src="images/characters/opaline/neutral.png"> </div> </div> </div> </div> <div class="sprite fadein" style="left:50%; transform: translateX(-30%);"> <img class="chat" src="images/characters/npc/fem1.png"> </div> <div class="sprite fadein" style="left:50%; transform: translateX(10%);"> <img src="images/characters/npc/male4.png"> </div> <<char "Merchant">>HEY! ARE YOU INSANE?! You don't drag those crates through the main area, you oaf. You're going to bother our customers. Use the service elevator!<</char>> <<case 56>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(-30%);"> <img src="images/characters/npc/fem1.png"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img class="chat" src="images/characters/npc/male4.png"> </div> <<char "Driver">> What? Bother the customers? It's just some old fruits…<</char>> <<case 57>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(-30%);"> <img src="images/characters/npc/fem1.png"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/npc/male4.png"> </div> <<char>> Two figures stand in front one of the shops, a fancy woman who seems to own the place, and a gruff looking man whose looks don't quite seem to match with the fine delivery uniform he is dressed in.<</char>> <<case 58>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(-30%);"> <img src="images/characters/npc/fem1.png"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/npc/male4.png"> </div> <<char>> A couple of large crates stand between them, their tops covered with tarp.<</char>> <<case 59>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(-30%);"> <img class="chat" src="images/characters/npc/fem1.png"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/npc/male4.png"> </div> <<char "Merchant">> This stuff is disgusting! Maybe you people down in the slums enjoy the stench of rot, but up here we have standards! Use the service elevator!<</char>> <<case 60>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(-30%);"> <img src="images/characters/npc/fem1.png"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img class="chat" src="images/characters/npc/male4.png"> </div> <<char "Driver">> Yeah yeah yeah - no need to get all up in my face.<</char>> <<case 61>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(-30%);"> <div class="slideR"> <img class="fadeout" src="images/characters/npc/fem1.png" style="animation-duration:1s;"> </div> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <div class="slideR"> <div class="turn"> <img class="fadeout" src="images/characters/npc/male4.png" style="animation-duration:1s;"> </div> </div> </div> <<char>> With a deep grunt he starts moving one of the crates, leaving the others behind.<</char>> <<case 62>> <div class="sprite" style="left:50%; transform: translateX(-90%);"> <div class="slideR"> <div class="slideR"> <div class="slideR"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> </div> </div> </div> <<char>> Opaline drifts silently closer. The tarp of the remaining crate has slightly shifted, allowing her to peek inside. It's filled with bananas, their perfect yellow peels stained with little brown splotches here and there.<</char>> <<case 63>> <div class="sprite" style="left:50%; transform: translateX(-30%);"> <div class="jump"> <div id="opaline" class="slideL"> <img src="images/characters/opaline/scared1.png" style="transform:scaleX(-1)"> </div> </div> </div> <<timed 1.2s>> <<replace "#opaline">> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> <</replace>> <</timed>> <div class="sprite" style="left:50%; transform: translateX(30%);"> <div class="slideL"> <img class="fadein" src="images/characters/npc/fem1.png" style="transform:scaleX(-1);"> </div> </div> </div> <<char "Merchant">> Oh - I'm so sorry dear customer. We are just getting rid of some of our old stock.<</char>> <<case 64>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/npc/fem1.png" style="transform:scaleX(-1);"> </div> <<char>> The sudden appearance of the shop owner makes Opaline jump in surprise, but she quickly manages to catch herself.<</char>> <<case 65>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/npc/fem1.png" style="transform:scaleX(-1);"> </div> <<char "opaline">> You're just… getting rid of it?<</char>> <<case 66>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <div class="chat"> <img src="images/characters/npc/fem1.png" style="transform:scaleX(-1);"> </div> </div> <<char "Merchant">>Exactly. These things are overripe and distasteful. We can't have our valued customers eat something like that. They'll be shipped down into the slums, and sold there. These lower city - people - will eat anything after all.<</char>> <<case 67>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <div class="chat"> <img src="images/characters/npc/fem1.png" style="transform:scaleX(-1);"> </div> </div> <<char "Merchant">>But maybe you'd like to step in and sample some of our freshly squeezed fruit cocktails. They rejuvenate old skin and damaged hair follicles.<</char>> <<case 68>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <img src="images/characters/npc/fem1.png" style="transform:scaleX(-1);"> </div> <<char "opaline">> M-maybe later… I'm still waiting for my father…<</char>> <<case 69>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <div class="chat"> <img src="images/characters/npc/fem1.png" style="transform:scaleX(-1);"> </div> </div> <<char "Merchant">>Of course! And again - I sincerely apologize for that ghastly sight and smell. I'll make sure this won't happen in the future.<</char>> <<case 70>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="sprite" style="left:50%; transform: translateX(10%);"> <div class="slideR"> <div class="turn"> <img class="fadeout" src="images/characters/npc/fem1.png" style="transform:scaleX(-1); animation-duration:1s;"> </div> </div> </div> <<char>> She gestures towards the remaining crate again before leaving - a crate just large enough that Opaline could slip inside - a crate scheduled to be driven down to the lower city where nobody would ever come looking for her…<</char>> <<case 71>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="slideL"> <div class="turn"> <img src="images/characters/opaline/sad2.png" style="transform:scaleX(-1)"> </div> </div> </div> <<char>> It's an utterly stupid thought of course. There's so many reasons why she shouldn't do it.<</char>> <<case 72>> <div style="position:fixed; left:50%; top:50%; transform: translate(-50%, -50%);"> <div class="slideR"> <div class="fadein option" style="transform: translateX(-20%);"> The Lower City is filled with dangerous criminals. <<link "">> <<set $passage to "A1S3P1-O1">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> <div class="slideL"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> She doesn't carry much money, or anything else she would need. <<link "">> <<set $passage to "A1S3P1-O2">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> <div class="slideR"> <div class="fadein option" style="margin-top:1em; transform: translateX(-20%);"> She has no plan at all about what to do next. <<link "">> <<set $passage to "A1S3P1-O3">> <<set $count to 0>> <<goto "play">> <</link>> </div> </div> </div> <<set setup.skip to false>> <</switch>>
<<replace "#back">> <div class="plaza" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform: translateX(-70%);"> <div class="slideR"> <div class="turn"> <img src="images/characters/opaline/sad1.png"> </div> </div> </div> <<char>> She has heard it again and again. That all of the people living down in the slums are thieves and murderers. That they would do terrible things to a girl like her.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="slideL"> <div class="turn"> <img src="images/characters/opaline/sad2.png" style="transform:scaleX(-1)"> </div> </div> </div> <<char>> Are they really all like this? Opaline isn't sure, but there has to be some truth to it all. It's the only thing Opaline has ever heard about the Lower City.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform: translateX(-70%);"> <div class="slideR"> <div class="turn"> <img src="images/characters/opaline/sad1.png"> </div> </div> </div> <<char>> Except on the pages of Mya Tempest of course. In those novels there are a lot of bad and dangerous people lurking down in the slums, but there are also dashing heroes and charming rogues.<</char>> <<set $count to -1>> <<set $passage to "A1S3P2">> <</switch>>
<<replace "#back">> <div class="plaza" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform: translateX(-70%);"> <div class="slideR"> <div class="turn"> <img src="images/characters/opaline/sad1.png"> </div> </div> </div> <<char>> She has a few chips in her pocket, to buy some simple things at the market, but that is all.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="slideL"> <div class="turn"> <img src="images/characters/opaline/sad2.png" style="transform:scaleX(-1)"> </div> </div> </div> <<char>> How far could she even get with this little on her. And she doesn't have any skills she could use to earn any more money either.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform: translateX(-70%);"> <div class="slideR"> <div class="turn"> <img src="images/characters/opaline/sad1.png"> </div> </div> </div> <<char>> Mya Tempest never has those problems. In her novels she always finds some way to get by, or makes new friends to help her out.<</char>> <<set $count to -1>> <<set $passage to "A1S3P2">> <</switch>>
<<replace "#back">> <div class="plaza" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform: translateX(-70%);"> <div class="slideR"> <div class="turn"> <img src="images/characters/opaline/sad1.png"> </div> </div> </div> <<char>> So she's just going to hop on the back of some truck, and let herself get carried away, and then what?<</char>> <<case 1>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="slideL"> <div class="turn"> <img src="images/characters/opaline/sad2.png" style="transform:scaleX(-1)"> </div> </div> </div> <<char>> There's nobody she knows in the Lower City. She's never even been there in her entire life. All she knows about that place comes from the pages of her adventure books.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform: translateX(-70%);"> <div class="slideR"> <div class="turn"> <img src="images/characters/opaline/sad1.png"> </div> </div> </div> <<char>> In Mya Temple the Lower City is a labyrinth of dark alleys filled with shady night clubs and seedy bars, and Mya never needs a plan to get by.<</char>> <<set $count to -1>> <<set $passage to "A1S3P2">> <</switch>>
<<replace "#back">> <div class="plaza" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <div class="slideL"> <div class="turn"> <img src="images/characters/opaline/sad1.png" style="transform:scaleX(-1)"> </div> </div> </div> <<char>> But that's just a silly story. Just a silly story for stupid girls like her. Things aren't the same out here in reality.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform: translateX(-70%);"> <div class="turn"> <img src="images/characters/opaline/sad2.png"> </div> </div> <<char "opaline">> This is stupid… this is a dumb idea… You're a stupid little girl, Opaline. Stupid - stupid - stupid -...<</char>> <<case 2>> <div class="sprite" style="left:50%; transform: translateX(-70%);"> <div class="slideR"> <div class="slideR"> <div class="slideR"> <img class="fadeout" src="images/characters/opaline/angry.png" style="transform:scaleX(-1); animation-duration:0.5s; animation-delay:0.5s;"> </div> </div> </div> </div> <<timed 1s>> <div class="sprite" style="left:50%; transform: translateX(30%);"> <div class="slideL"> <img class="fadein" src="images/characters/npc/male4.png" style="animation-duration:1s;"> </div> </div> <</timed>> <<timed 1.5s>> <<char "Driver">> Alright - let's get this one down as well…<</char>> <</timed>> <<case 3>> <div class="sprite" style="left:50%; transform: translateX(10%);"> <div class="jump"> <img class="shake" src="images/characters/npc/male4.png"> </div> </div> <<char "Driver">> Ugh - GODDAMN - Did that stupid bitch load the thing with bricks?<</char>> <<case 4>> <div class="sprite" style="left:50%; transform: translateX(10%);"> <div class="slideR"> <div class="turn"> <img class="fadeout" src="images/characters/npc/male4.png" style="animation-duration:1s;"> </div> </div> </div> <div class="sprite" style="left:50%; transform: translateX(-110%);"> <div class="slideR"> <div class="slideR"> <img class="fadein" src="images/characters/npc/everhart.png" style="animation-duration:1s; transform:scaleX(-1);"> </div> </div> </div> <<timed 1s>> <<char "Sir Everhart">>I think I have found the perfect dress. It's perfectly modest and appropriate, but it will still stir Sir Ingot's feelings.<</char>> <</timed>> <<case 5>> <div class="sprite" style="left:50%; transform: translateX(-70%);"> <div class="slideR"> <img src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> </div> <<char "Sir Everhart">> Opaline? OPALINE? Now where did that damn girl head off this time?<</char>> <<case 6>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img class="idle" src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <<char "Sir Everhart">> OPALINE! YOU NEED TO COME BACK TO GET MEASURED. WE NEED THE DRESS TO FIT PERFECTLY IF YOU WANT TO IMPRESS SIR INGOT. <</char>> <<case 7>> <div class="sprite" style="left:50%; transform: translateX(-50%);"> <img class="idle" src="images/characters/npc/everhart.png" style="transform:scaleX(-1);"> </div> <div class="fadein" style="opacity:0; position:fixed; top:0;left:0;right:0;bottom:0; background:black; animation-duration:1s;"></div> <<char "Sir Everhart">> Opaline…!?<</char>> <<set $count to -1>> <<set $passage to "A1S4P1">> <</switch>>
<div id="crowd" class="crowd" style="animation-name:none; position:absolute; top:0; left:0; height:100%; width:100%;"> <div class="wandering3" style="left:-50%; bottom:2%; height: 90%; animation-delay:1.8s;"> <img src="images/characters/npc/fem5.png" style="transform:scaleX(-1);"> </div> <div class="wandering2" style="left:-50%; bottom:2%; height: 90%; animation-delay:5.6s;"> <img src="images/characters/npc/fem2.png"> </div> <div class="wandering2" style="left:-50%; bottom:2%; height: 90%; animation-delay:2.1s; animation-duration:15s;"> <img src="images/characters/npc/fem4.png"> </div> <div class="wandering3" style="left:-50%; bottom:2%; height: 90%; animation-delay:7.7s;"> <img src="images/characters/npc/male2.png"> </div> <div class="wandering2" style="left:-50%; bottom:2%; height: 90%;"> <img src="images/characters/npc/male1.png"> </div> <div class="wandering3" style="left:-50%; bottom:2%; height: 90%; animation-delay:4.9s; animation-duration:15s;"> <img src="images/characters/npc/snively.png" style="transform:scaleX(-1);"> </div> </div>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("opaline")>> <<replace "#effect">> <<include "harrass">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div style="position:fixed; top:0;left:0;right:0;bottom:0; background:black;"></div> </div> <<char>>A little slimy trail seems to lead towards the very same alley she is heading towards. It consists mainly of crushed banana pieces. How strange.<</char>> <<case 1>> <div style="position:fixed; top:0;left:0;right:0;bottom:0; background:black;"></div> </div> <<char>>Hushed voices drift to her ears from the far end of the shady pathway.<</char>> <<case 2>> <div style="position:fixed; top:0;left:0;right:0;bottom:0; background:black;"></div> </div> <<char "Male Thug">>…no really… where are you from…<</char>> <<case 3>> <div style="position:fixed; top:0;left:0;right:0;bottom:0; background:black;"></div> </div> <<char "Female Thug">>…yeah… come on, little cutie… we won't bite… we just want to have some fun…<</char>> <<case 4>> <div class="fadeout" style="position:fixed; top:0;left:0;right:0;bottom:0; background:black; animation-duration:1s;"></div> </div> <<char>>A strange looking girl squeezes herself against a wall a bit further into the shadows, cornered by the two street thugs.<</char>> <<case 5>> <<char>>Her breath goes in quick shallow gasps, and her entire body appears to be frozen in terror. Tears glisten beneath her eyes.<</char>> <<case 6>> <<char "Male Thug">>We can have lots of fun. I'm sure we could even teach a pretty little thing like you a few more tricks.<</char>> <<case 7>> <div class="sprite" style="left:50%; transform:translateX(-110%);"> <div class="slideR"> <div class="slideR"> <div class="slideR"> <img class="fadein" src="images/characters/rora/neutral.png" style="animation-duration:1s; transform:scaleX(-1);"> </div> </div> </div> </div> <<char>>Rora can feel the girl's gaze on her for a second as she passes by the group, but she refuses to even turn her head.<</char>> <<case 8>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char>>This isn't her problem.<</char>> <<case 9>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>There are a thousand reasons why she shouldn't get involved in this.<</char>> <<case 10>> <div style="position:fixed; left:50%; top:50%; transform: translate(-50%, -50%);"> <<if $survival>> <div class="slideR" style="opacity:0.5"> <div class="fadein option" style="transform: translateX(-20%);"> It's survival of the fittest down here. </div> </div> <<else>> <div class="slideR"> <div class="fadein option" style="transform: translateX(-20%);"> It's survival of the fittest down here. <<link "">> <<set $survival to true>> <<set $count to 0>> <<set $passage to "A1S4P3-O1">> <<goto "play">> <</link>> </div> </div> <</if>> <<if $injured>> <div class="slideL" style="opacity:0.5"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> Her injuries are still fresh, and she should avoid getting hurt. </div> </div> <<else>> <div class="slideL"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> Her injuries are still fresh, and she should avoid getting hurt. <<link "">> <<set $injured to true>> <<set $count to 0>> <<set $passage to "A1S4P3-O2">> <<goto "play">> <</link>> </div> </div> <</if>> <<if $care>> <div class="slideL" style="opacity:0.5"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> Better not to get involved in other people's business. </div> </div> <<else>> <div class="slideR"> <div class="fadein option" style="margin-top:1em; transform: translateX(-20%);"> Better not to get involved in other people's business. <<link "">> <<set $care to true>> <<set $count to 0>> <<set $passage to "A1S4P3-O3">> <<goto "play">> <</link>> </div> </div> <</if>> </div> <</switch>>
<div id="opaline" class="sprite" style="left:50%; transform:translateX(-90%); bottom:15%; height:85%;"> <div class="harrass3"> <img class="shake" src="images/characters/opaline/scared.png"> </div> </div> <div id="crowd" class="crowd" style="animation-name:none; position:absolute; top:0; left:0; height:100%; width:100%;"> <div class="harrass" style="left:50%; bottom:10%; height:90%;"> <img src="images/characters/npc/fem3.png" style="position:relative;transform:translateX(-120%);"> </div> <div class="harrass2" style="left:50%; bottom:10%; height:90%; animation-delay:2s;"> <img src="images/characters/npc/thug.png" style="position:relative;transform:translateX(-60%) scaleX(-1);"> </div> </div>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("opaline")>> <<replace "#effect">> <<include "harrass">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideR"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> <<char>>Down here in the Lower City there are only two options. You either toughen up, or you get crushed by those who are stronger.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char>>Maybe the strange girl is new around here. Maybe she doesn't know how it works yet. But she'll just have to learn the hard way.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>She'll either make it through this and grow stronger, or the city will eat her up and spit her out. That's just the natural order, and there's no reason to mess with the natural order.<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char "Female Thug">>Such smooth fur. Kinda makes you want to see how it'll look all dirty and messed up, doesn't it?<</char>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>Rora doesn't need to get involved in this. There are a thousand reasons why she should just keep walking.<</char>> <<set $count to -1>> <<set $passage to "A1S4P4">> <</switch>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("opaline")>> <<replace "#effect">> <<include "harrass">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideR"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> <<char>>She might have pretended to be fine in front of Boris, but she is not. Even the slightest brush against her ribcage makes her seize up.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char>>Starting a fight with both of these thugs at once could go really bad for her.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>So why should she take this kind of risk for some complete stranger? Some dumb girl who got into trouble all on her own?<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char "Male Thug">>Not from around here, are you, little girl? Don't worry, we'll take good care of cute little newcomers like you…<</char>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>Rora doesn't need to get involved in this. There are a thousand reasons why she should just keep walking.<</char>> <<set $count to -1>> <<set $passage to "A1S4P4">> <</switch>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("opaline")>> <<replace "#effect">> <<include "harrass">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-50%);"> <div class="slideR"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> <<char>>She has seen this happen a thousand times - has grown up with the sight - had to fight her way out of situations like this more than once as she got older.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char>>This is just normal down here. It happens every day.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>It's impossible to help every time she sees it unfold. Better to just move on with her day then. Better not to care. Better not to even notice.<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char "Female Thug">>What did you think would happen coming here all alone? You must have secretly wanted this, didn't you?<</char>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>Rora doesn't need to get involved in this. There are a thousand reasons why she should just keep walking.<</char>> <<set $count to -1>> <<set $passage to "A1S4P4">> <</switch>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("opaline")>> <<replace "#effect">> <<include "harrass">> <</replace>> <</if>> <div style="position:fixed; left:50%; top:50%; transform: translate(-50%, -50%);"> <<if $survival>> <div class="slideR" style="opacity:0.5"> <div class="fadein option" style="transform: translateX(-20%);"> It's survival of the fittest down here. </div> </div> <<else>> <div class="slideR"> <div class="fadein option" style="transform: translateX(-20%);"> It's survival of the fittest down here. <<link "">> <<set $survival to true>> <<set $count to 0>> <<set $passage to "A1S4P4-O1">> <<goto "play">> <</link>> </div> </div> <</if>> <<if $injured>> <div class="slideL" style="opacity:0.5"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> Her injuries are still fresh, and she should avoid getting hurt. </div> </div> <<else>> <div class="slideL"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> Her injuries are still fresh, and she should avoid getting hurt. <<link "">> <<set $injured to true>> <<set $count to 0>> <<set $passage to "A1S4P4-O2">> <<goto "play">> <</link>> </div> </div> <</if>> <<if $care>> <div class="slideL" style="opacity:0.5"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> Better not to get involved in other people's business. </div> </div> <<else>> <div class="slideR"> <div class="fadein option" style="margin-top:1em; transform: translateX(-20%);"> Better not to get involved in other people's business. <<link "">> <<set $care to true>> <<set $count to 0>> <<set $passage to "A1S4P4-O3">> <<goto "play">> <</link>> </div> </div> <</if>> </div>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("opaline")>> <<replace "#effect">> <<include "harrass">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="slideR"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> <<char>>Down here in the Lower City there are only two options. You either toughen up, or you get crushed by those who are stronger.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char>>Maybe the strange girl is new around here. Maybe she doesn't know how it works yet. But she'll just have to learn the hard way.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>She'll either make it through this and grow stronger, or the city will eat her up and spit her out. That's just the natural order, and there's no reason to mess with the natural order.<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char "Female Thug">>Such smooth fur. Kinda makes you want to see how it'll look all dirty and messed up, doesn't it?<</char>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>Rora doesn't need to get involved in this. There are a thousand reasons why she should just keep walking.<</char>> <<set $count to -1>> <<set $passage to "A1S4P5">> <</switch>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("opaline")>> <<replace "#effect">> <<include "harrass">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="slideR"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> <<char>>She might have pretended to be fine in front of Boris, but she is not. Even the slightest brush against her ribcage makes her seize up.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char>>Starting a fight with both of these thugs at once could go really bad for her.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>So why should she take this kind of risk for some complete stranger? Some dumb girl who got into trouble all on her own?<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char "Male Thug">>Not from around here, are you, little girl? Don't worry, we'll take good care of cute little newcomers like you…<</char>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>Rora doesn't need to get involved in this. There are a thousand reasons why she should just keep walking.<</char>> <<set $count to -1>> <<set $passage to "A1S4P5">> <</switch>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("opaline")>> <<replace "#effect">> <<include "harrass">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-30%);"> <div class="slideR"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> <<char>>She has seen this happen a thousand times - has grown up with the sight - had to fight her way out of situations like this more than once as she got older.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char>>This is just normal down here. It happens every day.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>It's impossible to help every time she sees it unfold. Better to just move on with her day then. Better not to care. Better not to even notice.<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char "Female Thug">>What did you think would happen coming here all alone? You must have secretly wanted this, didn't you?<</char>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>Rora doesn't need to get involved in this. There are a thousand reasons why she should just keep walking.<</char>> <<set $count to -1>> <<set $passage to "A1S4P5">> <</switch>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("opaline")>> <<replace "#effect">> <<include "harrass">> <</replace>> <</if>> <div style="position:fixed; left:50%; top:50%; transform: translate(-50%, -50%);"> <<if $survival>> <div class="slideR" style="opacity:0.5"> <div class="fadein option" style="transform: translateX(-20%);"> It's survival of the fittest down here. </div> </div> <<else>> <div class="slideR"> <div class="fadein option" style="transform: translateX(-20%);"> It's survival of the fittest down here. <<link "">> <<set $survival to true>> <<set $count to 0>> <<set $passage to "A1S4P5-O1">> <<goto "play">> <</link>> </div> </div> <</if>> <<if $injured>> <div class="slideL" style="opacity:0.5"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> Her injuries are still fresh, and she should avoid getting hurt. </div> </div> <<else>> <div class="slideL"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> Her injuries are still fresh, and she should avoid getting hurt. <<link "">> <<set $injured to true>> <<set $count to 0>> <<set $passage to "A1S4P5-O2">> <<goto "play">> <</link>> </div> </div> <</if>> <<if $care>> <div class="slideL" style="opacity:0.5"> <div class="fadein option" style="margin-top:1em; transform: translateX(20%);"> Better not to get involved in other people's business. </div> </div> <<else>> <div class="slideR"> <div class="fadein option" style="margin-top:1em; transform: translateX(-20%);"> Better not to get involved in other people's business. <<link "">> <<set $care to true>> <<set $count to 0>> <<set $passage to "A1S4P5-O3">> <<goto "play">> <</link>> </div> </div> <</if>> </div>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("opaline")>> <<replace "#effect">> <<include "harrass">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <div class="slideR"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> <<char>>Down here in the Lower City there are only two options. You either toughen up, or you get crushed by those who are stronger.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char>>Maybe the strange girl is new around here. Maybe she doesn't know how it works yet. But she'll just have to learn the hard way.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>She'll either make it through this and grow stronger, or the city will eat her up and spit her out. That's just the natural order, and there's no reason to mess with the natural order.<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char "Female Thug">>Such smooth fur. Kinda makes you want to see how it'll look all dirty and messed up, doesn't it?<</char>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>Rora doesn't need to get involved in this. There are a thousand reasons why she should just keep walking.<</char>> <<set $count to -1>> <<set $passage to "A1S4P6">> <</switch>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("opaline")>> <<replace "#effect">> <<include "harrass">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <div class="slideR"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> <<char>>She might have pretended to be fine in front of Boris, but she is not. Even the slightest brush against her ribcage makes her seize up.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char>>Starting a fight with both of these thugs at once could go really bad for her.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>So why should she take this kind of risk for some complete stranger? Some dumb girl who got into trouble all on her own?<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char "Male Thug">>Not from around here, are you, little girl? Don't worry, we'll take good care of cute little newcomers like you…<</char>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>Rora doesn't need to get involved in this. There are a thousand reasons why she should just keep walking.<</char>> <<set $count to -1>> <<set $passage to "A1S4P6">> <</switch>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<if not document.getElementById("opaline")>> <<replace "#effect">> <<include "harrass">> <</replace>> <</if>> <<switch $count>> <<case 0>> <div class="sprite" style="left:50%; transform:translateX(-10%);"> <div class="slideR"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> <<char>>She has seen this happen a thousand times - has grown up with the sight - had to fight her way out of situations like this more than once as she got older.<</char>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char>>This is just normal down here. It happens every day.<</char>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>It's impossible to help every time she sees it unfold. Better to just move on with her day then. Better not to care. Better not to even notice.<</char>> <<case 3>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> <<char "Female Thug">>What did you think would happen coming here all alone? You must have secretly wanted this, didn't you?<</char>> <<case 4>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> <<char>>Rora doesn't need to get involved in this. There are a thousand reasons why she should just keep walking.<</char>> <<set $count to -1>> <<set $passage to "A1S4P6">> <</switch>>
<<replace "#back">> <div class="alley" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <</replace>> <<replace "#effect">> <</replace>> <<switch $count>> <<case 0>> <div id="load" class="sprite2" style="opacity:0; left:50%;"> <<punch>> <<punch2>> <<punch-miss>> <<punch2-miss>> <<punch3>> <<kick>> </div> <div class="sprite2" style="opacity:0; left:50%;"> <img src="images/characters/rora/scared.png"> </div> <<unset $injured>> <<unset $care>> <<unset $survival>> <div class="sprite" style="left:50%; transform:translateX(10%);"> <div class="slideR"> <img class="fadeout" src="images/characters/rora/angry.png" style="transform:scaleX(-1); animation-duration:1s;"> </div> </div> <div id="opaline" class="sprite" style="left:50%; transform:translateX(-90%); bottom:15%; height:85%;"> <img class="shake" src="images/characters/opaline/scared.png"> </div> <div id="thugs"> <div id="crowd" class="crowd" style="animation-name:none; position:absolute; top:0; left:0; height:100%; width:100%;"> <div class="harrass" style="left:50%; bottom:10%; height:90%;"> <img src="images/characters/npc/fem3.png" style="position:relative;transform:translateX(-120%);"> </div> <div class="harrass2" style="left:50%; bottom:10%; height:90%; animation-delay:2s;"> <img src="images/characters/npc/thug.png" style="position:relative;transform:translateX(-60%) scaleX(-1);"> </div> </div> </div> <<timed 2s>> <div class="sprite" style="left:50%; transform:translateX(10%); bottom:10%; height:90%;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <img class="fadein" src="images/characters/rora/angry.png" style="animation-duration:0.5s;"> </div> </div> </div> </div> <<replace "#opaline">> <div class="jump"> <img src="images/characters/opaline/scared.png" style="transform:scaleX(-1)"> </div> <</replace>> <<replace "#thugs">> <div id="crowd" class="crowd" style="animation-name:none; position:absolute; top:0; left:0; height:100%; width:100%;"> <div class="jump" style="animation-delay:0.7s; width:100%; height:100%"> <div class="jump" style="animation-delay:0.7s; left:50%; bottom:10%; height:90%;"> <img src="images/characters/npc/fem3.png" style="position:relative;transform:translateX(-120%);"> </div> </div> <div style="left:50%; bottom:10%; height:90%;"> <div class="jump" style="width:100%; height:100%"> <div class="jump" style="width:100%; height:100%"> <img class="fadeout" src="images/characters/npc/thug.png" style="position:relative;transform:translateX(-60%) scaleX(-1); animation-duration; 1s;"> </div> </div> </div> <</replace>> <</timed>> <<timed 2s>> <<replace "#load">><</replace>> <div class="sprite2" style="left:50%; transform:translateX(-50%) scaleX(-1);"> <<kick>> </div> <</timed>> <<timed 2.7s>> <<char "Female Thug">>WHAT THE FUCK?!<</char>> <</timed>> <<case 1>> <div class="sprite" style="left:50%; transform:translateX(-90%); bottom:15%; height:85%;"> <div class="jump"> <img src="images/characters/opaline/scared.png" style="transform:scaleX(-1)"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-50%); bottom:10%; height:90%;"> <div class="slideL" style="animation-duration:0.5s;"> <div class="slideR" style="animation-duration:0.5s;animation-delay:0.5s"> <img src="images/characters/rora/angry.png"> </div> </div> </div> <div class="sprite2" style="left:50%; transform:translateX(-90%) scaleX(-1);"> <<kick>> </div> <div id="crowd" class="crowd" style="animation-name:none; position:absolute; top:0; left:0; height:100%; width:100%;"> <div class="jump" style="width:100%; height:100%"> <div class="jump" style="left:50%; bottom:10%; height:90%;"> <img class="fadeout" src="images/characters/npc/fem3.png" style="position:relative;transform:translateX(-120%); animation-duration; 0.5s;"> </div> </div> </div> <<timed 1s>> <<char "Female Thug">>GLLLRGR-!<</char>> <</timed>> <<case 2>> <div class="sprite" style="left:50%; transform:translateX(-90%); bottom:15%; height:85%;"> <div class="shake"> <img src="images/characters/opaline/scared.png" style="transform:scaleX(-1)"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-50%); bottom:10%; height:90%;"> <div class="jump" style="animation-duration:0.5s;"> <img src="images/characters/rora/scared.png"> <div class="damage"> <img src="images/characters/rora/scared.png"> </div> </div> </div> <div class="fadein" style="opacity:0; position:fixed; top:0;left:0;right:0;bottom:0; background:black; animation-duration:1s; animation-delay:0.5s;"></div> <<char>>The moment Rora delivers the last punch, something snap inside her body. A second later the world goes black.<</char>> <<case 2>> <div style="position:fixed; top:0;left:0;right:0;bottom:0; background:black;"></div> <<char>>So maybe the injury was a lot worse than she had thought. So what? She'll be back to her feet in a second.<</char>> <<case 3>> <div style="position:fixed; top:0;left:0;right:0;bottom:0; background:black;"></div> <<char>>Any second now she'll be feeling her face smash against the pavement. That's just what you get for getting involved with other people's business.<</char>> <<case 4>> <div class="alley blur" style="position:fixed; left:0; bottom:0; width:100%; height:100%"> </div> <div class="sprite blur" style="left:50%; transform:translateX(-50%); top:-40%; height:300%;"> <img src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> <img class="drunk" src="images/characters/opaline/neutral.png" style="transform:scaleX(-1)"> </div> <div class="blackout"> </div> <div class="fadeout" style="position:fixed; top:0;left:0;right:0;bottom:0; background:black; animation-duration:0.5s;"></div> <<char>>But the impact never comes. Instead she lands in something soft and warm. A deep sweet scent fills her nostrils, and a strange tingling yearning spreads in her chest.<</char>> <<case 5>> <div class="sprite" style="left:50%; transform:translateX(-60%);"> <div class="jump" style="animation-duration:0.5s;"> <div class="slideL" style="animation-duration:0.5s;"> <img src="images/characters/opaline/scared1.png" style="transform:scaleX(-1);"> </div> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-40%);"> <div class="jump" style="animation-duration:0.5s;"> <div class="slideR" style="animation-duration:0.5s;"> <img src="images/characters/rora/scared.png"> </div> </div> </div> <<char "rora">>AHHH!!<</char>> <<case 6>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="jump"> <img src="images/characters/opaline/scared.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <img src="images/characters/rora/angry.png"> </div> <<char>>It has only been a single moment of weakness. The moment it has passed Rora puts on her angry face, and lets out a low growl.<</char>> <<case 7>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="shake"> <img src="images/characters/opaline/sad3.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <img src="images/characters/rora/angry.png"> </div> <<char>>The girl in front of her responds with another series of helpless whimpers and sobs. Her body remains frozen in place, bound by shackles of pure fear.<</char>> <<case 8>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="shake"> <img src="images/characters/opaline/sad.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="turn"> <img src="images/characters/rora/angry.png"> </div> </div> <<char>>She'll probably end up the victim of the next group of thugs in a few minutes, but that's not Rora's problem.<</char>> <<case 9>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="shake"> <img src="images/characters/opaline/sad3.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(-20%);"> <div class="slideR"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> </div> <<char>>Why should she give a shit about what happens to this weirdo?<</char>> <<case 10>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="shake"> <img src="images/characters/opaline/sad3.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(0%);"> <div class="slideR"> <img src="images/characters/rora/disappointed.png" style="transform:scaleX(-1);"> </div> </div> <<char>>There's a thousand reasons why she shouldn't care...<</char>> <<case 11>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="shake"> <img src="images/characters/opaline/sad.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="idle"> <img src="images/characters/rora/peeved.png" style="transform:scaleX(-1);"> </div> </div> <<char "rora">>...fuck - fuck - fuck...<</char>> <<case 12>> <div class="sprite" style="left:50%; transform:translateX(-80%);"> <div class="shake"> <img src="images/characters/opaline/sad3.png" style="transform:scaleX(-1);"> </div> </div> <div class="sprite" style="left:50%; transform:translateX(20%);"> <div class="slideL"> <div class="slideL"> <div class="turn"> <img src="images/characters/rora/neutral.png" style="transform:scaleX(-1);"> </div> </div> </div> </div> <<char "rora">>...oh god fucking damned...<</char>> <<case 13>> <div style="position:fixed; top:0;left:0;right:0;bottom:0; background:black;"> <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;"> -End of Act 1-<br>End of Current Content<br>Stay tuned for the full release in 2025! </div> </div> <</switch>>
<<replace "#txt">><</replace>> <<replace "#back">><</replace>> <<replace "#effect">><</replace>> <<set $passage to "A1S1P1">> <<set $count to 0>> <<set setup.skip to false>> <<set setup.auto to false>> <div style="position:fixed; overflow:hidden; top:0; bottom:0; width:40%; left:0; border-top-right-radius:50%; border-bottom-right-radius:50%;"> <img src="images/stars.jpg" style="bottom:0; left:0; height:100%; width: auto; position:absolute;"> <img src="images/rora.png" style="bottom:0; left:10%; height:100%; width: auto; position:absolute;-webkit-filter: drop-shadow(1px 1px 3px white) drop-shadow(-1px -1px 3px white) drop-shadow(1px -1px 3px white) drop-shadow(-1px 1px 3px white); ; filter: drop-shadow(1px 1px 3px white) drop-shadow(-1px -1px 3px white) drop-shadow(1px -1px 3px white) drop-shadow(-1px 1px 3px white);"> </div> <div style="position:fixed; top:0; bottom:0; width:40%; left:0; border-top-right-radius:50%; border-bottom-right-radius:50%; border: 5px solid black; box-shadow: inset -20px 0px 5px black;"></div> <div style="position:fixed; overflow:hidden; top:0; bottom:0; width:40%; right:0; border-top-left-radius:50%; border-bottom-left-radius:50%;"> <img src="images/sky.jpg" style="bottom:0; right:0; height:100%; width: auto; position:absolute;"> <img src="images/opaline.png" style="bottom:0; right:10%; height:100%; width: auto; position:absolute;-webkit-filter: drop-shadow(1px 1px 3px white) drop-shadow(-1px -1px 3px white) drop-shadow(1px -1px 3px white) drop-shadow(-1px 1px 3px white); ; filter: drop-shadow(1px 1px 3px white) drop-shadow(-1px -1px 3px white) drop-shadow(1px -1px 3px white) drop-shadow(-1px 1px 3px white);"> </div> <div style="position:fixed; top:0; bottom:0; width:40%; right:0; border-top-left-radius:50%; border-bottom-left-radius:50%; border: 5px solid black; box-shadow: inset 20px 0px 5px black;"></div> <img src="images/spark-title.png" style="position:absolute; top:1vh; left:50%; height:40vh; transform:translateX(-50%);"> <div style="position:absolute; left:30%; right:30%; top:40%; bottom:5%;"> <div style="position:absolute; left:0; right:0; top:50%; transform:translateY(-50%)"> <div style="margin-left:50%; text-align:center; font-size:7vh; padding:3vh; line-height:1em; transform:translateX(-50%);">Start [[|play]] </div> <div style="margin-left:50%; text-align:center; font-size:7vh; padding:3vh; line-height:1em;transform:translateX(-50%);">Load <<link "">> <<script>>UI.saves()<</script>> <</link>> </div> <div style="margin-left:50%; text-align:center; font-size:7vh; padding:3vh; line-height:1em;transform:translateX(-50%);">Chapter Select [[|chapter]] </div> <div style="margin-left:50%; text-align:center; font-size:7vh; padding:3vh; line-height:1em;transform:translateX(-50%);">Credits [[|credits]] </div> </div> </div> <<replace #txt>> <div style="visibility:hidden;"> <<include "rora">> <<include "boris">> <<include "opaline">> <<include "upper">> <<include "lower">> <<include "ingot">> <div class="sprite2" style="left:50%; transform:translateX(-40%);"> <<punch-miss>> </div> <div class="sprite2" style="left:50%; transform:translateX(-30%);"> <<punch2-miss>> </div> <div class="sprite2" style="left:50%; transform:translateX(-40%);"> <<punch>> </div> <div class="sprite2" style="left:50%; transform:translateX(-30%);"> <<punch2>> </div> <div class="sprite2" style="left:50%; transform:translateX(-20%);"> <<kick>> </div> <div class="sprite2" style="left:50%; transform:translateX(-30%);"> <<punch3>> </div> <div class="sprite"> <img src="images/characters/rora/angry.png"> </div> <div class="sprite"> <img src="images/characters/rora/disappointed.png"> </div> <div class="sprite"> <img src="images/characters/rora/blush.png"> </div> <div class="sprite"> <img src="images/characters/rora/happy.png"> </div> <div class="sprite"> <img src="images/characters/rora/neutral.png"> </div> <div class="sprite"> <img src="images/characters/rora/peeved.png"> </div> <div class="sprite"> <img src="images/characters/rora/peeved1.png"> </div> <div class="sprite"> <img src="images/characters/rora/sad.png"> </div> <div class="sprite"> <img src="images/characters/rora/scared.png"> </div> <div class="sprite"> <img src="images/characters/opaline/scared.png"> </div> <div class="sprite"> <img src="images/characters/opaline/scared1.png"> </div> <div class="sprite"> <img src="images/characters/opaline/angry.png"> </div> <div class="sprite"> <img src="images/characters/opaline/blush.png"> </div> <div class="sprite"> <img src="images/characters/opaline/happy.png"> </div> <div class="sprite"> <img src="images/characters/opaline/neutral.png"> </div> <div class="sprite"> <img src="images/characters/opaline/sad.png"> </div> <div class="sprite"> <img src="images/characters/opaline/sad1.png"> </div> <div class="sprite"> <img src="images/characters/opaline/sad2.png"> </div> <div class="sprite"> <img src="images/characters/opaline/sad3.png"> </div> <div class="sprite"> <img src="images/characters/ingot/neutral.png"> </div> <div class="sprite"> <img src="images/characters/ingot/irritated.png"> </div> <div class="sprite"> <img src="images/characters/ingot/smug.png"> </div> <div class="sprite"> <img src="images/characters/ingot/maniacal.png"> </div> <div class="sprite"> <img src="images/characters/ingot/angry.png"> </div> <div class="sprite"> <img src="images/characters/boris/neutral.png"> </div> <div class="sprite"> <img src="images/characters/boris/angry.png"> </div> <div class="sprite"> <img src="images/characters/boris/chill.png"> </div> <div class="sprite"> <img src="images/characters/boris/hurt.png"> </div> <div class="sprite"> <img src="images/characters/boris/shout.png"> </div> <div class="sprite"> <img src="images/characters/boris/smile.png"> </div> <img src="images/characters/boris/smile.png"> </div> <</replace>>
<div style="position:fixed; overflow:hidden; top:0; bottom:0; width:40%; left:0; border-top-right-radius:50%; border-bottom-right-radius:50%;"> <img src="images/stars.jpg" style="bottom:0; left:0; height:100%; width: auto; position:absolute;"> <img src="images/rora.png" style="bottom:0; left:10%; height:100%; width: auto; position:absolute;-webkit-filter: drop-shadow(1px 1px 3px white) drop-shadow(-1px -1px 3px white) drop-shadow(1px -1px 3px white) drop-shadow(-1px 1px 3px white); ; filter: drop-shadow(1px 1px 3px white) drop-shadow(-1px -1px 3px white) drop-shadow(1px -1px 3px white) drop-shadow(-1px 1px 3px white);"> </div> <div style="position:fixed; top:0; bottom:0; width:40%; left:0; border-top-right-radius:50%; border-bottom-right-radius:50%; border: 5px solid black; box-shadow: inset -20px 0px 5px black;"></div> <div style="position:fixed; overflow:hidden; top:0; bottom:0; width:40%; right:0; border-top-left-radius:50%; border-bottom-left-radius:50%;"> <img src="images/sky.jpg" style="bottom:0; right:0; height:100%; width: auto; position:absolute;"> <img src="images/opaline.png" style="bottom:0; right:10%; height:100%; width: auto; position:absolute;-webkit-filter: drop-shadow(1px 1px 3px white) drop-shadow(-1px -1px 3px white) drop-shadow(1px -1px 3px white) drop-shadow(-1px 1px 3px white); ; filter: drop-shadow(1px 1px 3px white) drop-shadow(-1px -1px 3px white) drop-shadow(1px -1px 3px white) drop-shadow(-1px 1px 3px white);"> </div> <div style="position:fixed; top:0; bottom:0; width:40%; right:0; border-top-left-radius:50%; border-bottom-left-radius:50%; border: 5px solid black; box-shadow: inset 20px 0px 5px black;"></div> <img src="images/spark-title.png" style="position:absolute; top:1vh; left:50%; height:40vh; transform:translateX(-50%);"> <div style="position:absolute; left:30%; right:30%; top:40%; bottom:5%;"> <div style="position:absolute; left:0; right:0; top:50%; transform:translateY(-50%)"> <div style="margin-left:50%; text-align:center; font-size:5vh; padding:3vh; line-height:1em; transform:translateX(-50%); color:rgba(0,0,0,0);">Art & Character Design - Octalyne <a href="https://octalyne.itch.io/">Art & Character Design - Octalyne</a> </div> <div style="margin-left:50%; text-align:center; font-size:5vh; padding:3vh; line-height:1em;transform:translateX(-50%); color:rgba(0,0,0,0);">Writing & Coding - YDN <a href="https://ydn.itch.io/">Writing & Coding - YDN</a> </div> <div style="margin-left:50%; text-align:center; font-size:7vh; padding:3vh; line-height:1em;transform:translateX(-50%);">Back [[|start]] </div> </div> </div>
<div style="position:fixed; overflow:hidden; top:0; bottom:0; width:40%; left:0; border-top-right-radius:50%; border-bottom-right-radius:50%;"> <img src="images/stars.jpg" style="bottom:0; left:0; height:100%; width: auto; position:absolute;"> <img src="images/rora.png" style="bottom:0; left:10%; height:100%; width: auto; position:absolute;-webkit-filter: drop-shadow(1px 1px 3px white) drop-shadow(-1px -1px 3px white) drop-shadow(1px -1px 3px white) drop-shadow(-1px 1px 3px white); ; filter: drop-shadow(1px 1px 3px white) drop-shadow(-1px -1px 3px white) drop-shadow(1px -1px 3px white) drop-shadow(-1px 1px 3px white);"> </div> <div style="position:fixed; top:0; bottom:0; width:40%; left:0; border-top-right-radius:50%; border-bottom-right-radius:50%; border: 5px solid black; box-shadow: inset -20px 0px 5px black; overflow:auto;"></div> <div style="position:fixed; overflow:hidden; top:0; bottom:0; width:40%; right:0; border-top-left-radius:50%; border-bottom-left-radius:50%;"> <img src="images/sky.jpg" style="bottom:0; right:0; height:100%; width: auto; position:absolute;"> <img src="images/opaline.png" style="bottom:0; right:10%; height:100%; width: auto; position:absolute;-webkit-filter: drop-shadow(1px 1px 3px white) drop-shadow(-1px -1px 3px white) drop-shadow(1px -1px 3px white) drop-shadow(-1px 1px 3px white); ; filter: drop-shadow(1px 1px 3px white) drop-shadow(-1px -1px 3px white) drop-shadow(1px -1px 3px white) drop-shadow(-1px 1px 3px white);"> </div> <div style="position:fixed; top:0; bottom:0; width:40%; right:0; border-top-left-radius:50%; border-bottom-left-radius:50%; border: 5px solid black; box-shadow: inset 20px 0px 5px black;"></div> <img src="images/spark-title.png" style="position:absolute; top:1vh; left:50%; height:40vh; transform:translateX(-50%);"> <div style="position:absolute; left:30%; right:30%; top:40%; bottom:5%;"> <div style="position:absolute; left:0; right:0; top:50%; transform:translateY(-50%)"> <div style="margin-left:50%; text-align:center; font-size:5vh; padding:3vh; line-height:1em;transform:translateX(-50%);">Scene 1 [[|play][$passage to "A1S1P1"]] </div> <div style="margin-left:50%; text-align:center; font-size:5vh; padding:3vh; line-height:1em;transform:translateX(-50%);">Scene 2 [[|play][$passage to "A1S2P1"]] </div> <div style="margin-left:50%; text-align:center; font-size:5vh; padding:3vh; line-height:1em;transform:translateX(-50%);">Scene 3 [[|play][$passage to "A1S3P1"]] </div> <div style="margin-left:50%; text-align:center; font-size:5vh; padding:3vh; line-height:1em;transform:translateX(-50%);">Scene 4 [[|play][$passage to "A1S4P1"]] </div> </div> </div>